@extends('admin.layouts.master')
@section('title')
{{ translate('Members - Create') }}
@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('Add New') }}</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('Add New') }}
                </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 Add') }}</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="basic-information">
                                    <form action="{{route('admin.members.store') }}" method="POST" id="basic-information-form">
                                    @csrf

                                    @if (session()->has('user_id'))
                                    
                                        <input type="hidden" name="user_id" value="{{ session('user_id') }}">
                                    @endif

                                    <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" placeholder="Username" id="user_name" name="user_name" value="{{ old('user_name', $user_data->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="{{ old('first_name', $user_data->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="{{ old('last_name', $user_data->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="{{ old('email', $user_data->email ?? '') }}" class="form-input" required>
                                                        @error('email')
                                                            <span class="text-red-500 text-sm">{{ $message }}</span>
                                                        @enderror
                                                    </div>

                                                    @if (!isset($user_data) || empty($user_data))
                                                        <div class="col-span-1">
                                                            <label for="password" class="inline-block mb-2 text-base font-medium">{{ translate('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>
                                                    @endif

                                                </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 value="" selected>{{ translate('Select') }}</option>
                                                            @foreach ($origins as $origin)
                                                                <option  value="{{ $origin->id}}"
                                                                    {{ old('origin_id', $user_data->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 value="" selected>{{ translate('Select') }}</option>
                                                            <option value="male" {{ old('gender', $user_data->gender ?? '' ) == 'male' ? 'selected' : '' }}>{{ translate('Male') }}</option>
                                                            <option value="female"  {{ old('gender', $user_data->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', $user_data->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_data['dob']) && \Carbon\Carbon::parse($user_data['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_data['dob']) && \Carbon\Carbon::parse($user_data['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_data['dob']) && \Carbon\Carbon::parse($user_data['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="{{ old('age', $user_data->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 required>
                                                    </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 value="" selected>{{ translate('Select') }}</option>
                                                                @foreach($religions as $religion)
                                                                    <option value="{{ $religion->id }}" {{ old('religion_id', $user_data->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 value="" selected>{{ translate('Select') }}</option>
                                                            @foreach($relationStatus as $status)
                                                                <option value="{{ $status->id }}" {{ old('relation_status_id', $user_data->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 value="" selected>{{ translate('Select') }}</option>
                                                            @foreach($amLookingFors as $amLookingFor)
                                                                <option value="{{ $amLookingFor->id }}" {{ old('am_looking_for_id', $user_data->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 value="" selected>{{ translate('Select') }}</option>
                                                            @foreach ($childerns as $childern)
                                                                <option value="{{ $childern->id}}" {{ old('children_id', $user_data->children_id ?? '') == $childern->id ? 'selected' : '' }}>{{ $childern->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 value="" selected>{{ translate('Select') }}</option>
                                                            @foreach ($cast as $cast_data)
                                                                <option value="{{ $cast_data->id}}" {{ old('cast', $user_data->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">Subcast<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 value="" selected>{{ translate('Select') }}</option>
                                                            @foreach ($subcast as $subcast_data)
                                                                <option value="{{ $subcast_data->id}}" {{ old('subcast', $user_data->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>{{ old('short_description', $user_data->short_description ?? '') }}</textarea>
                                                        </div>
                                                    </div>

                                                    <div class="flex justify-end gap-2 mt-4">
                                                           @if (session()->has('user_id'))
                                                            <a href="javascript:void(0);"  onclick="confirmDelete('{{ route('admin.members.cancel', session('user_id')) }}', {{ session('user_id') }})"
                                                                    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">
                                                                    Cancel
                                                                </a>
                                                             @else
                                                             <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">
                                                                cancel
                                                             </a>   
                                                             @endif
                                                        <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('Next') }}</button>
                                                    </div>
                                                </div>

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


                                <div class="hidden tab-pane" id="living">
                                    <form  action="{{route('admin.storeUserDetail.store') }}" method="POST" id="living-form">
                                    @csrf

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

                                    @if (session()->has('user_id'))
                                        <input type="hidden" name="user_id" value="{{ session('user_id') }}">
                                    @endif

                                        <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 value="" selected>{{ translate('Select') }}</option>
                                                            @foreach($countries as $country)
                                                                <option value="{{ $country->id }}" {{ old('country_id', $user_detail_old->country_id ?? '') == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                                                            @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" 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>
                                                        </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="" selected>{{ translate('Select') }}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="flex justify-end gap-2 mt-4">
                                                    @if (session()->has('user_id'))
                                                    <a href="javascript:void(0);"  onclick="confirmDelete('{{ route('admin.members.cancel', session('user_id')) }}', {{ session('user_id') }})"
                                                            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">
                                                            Cancel
                                                        </a>
                                                     @else
                                                     <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">
                                                        cancel
                                                     </a>   
                                                     @endif
                                                    <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('Next') }}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>



                           
                                <div class="hidden tab-pane" id="education">
                                    <form action="{{route('admin.storeEducation.store') }}" method="POST" id="education-form">
                                    @csrf

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

                                    @if (session()->has('user_id'))
                                        <input type="hidden" name="user_id" value="{{ session('user_id') }}">
                                    @endif

                                    <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>
                                        </div>
                                        @if ($diploma_m->status == '1')
                                        <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="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 }}"
                                                                {{ old('diploma_id', $user_detail_old->diploma_id ?? '') == $diploma->id ? 'selected' : '' }}>
                                                            {{ $diploma->name }}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="flex justify-end gap-2 mt-4">
                                                @if (session()->has('user_id'))
                                                <a href="javascript:void(0);"  onclick="confirmDelete('{{ route('admin.members.cancel', session('user_id')) }}', {{ session('user_id') }})"
                                                        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">
                                                        Cancel
                                                    </a>
                                                 @else
                                                 <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">
                                                    cancel
                                                 </a>   
                                                 @endif
                                            <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('Next') }}</button>
                                        </div>
                                        @endif
                                        
                                        </div>
                                    </div>
                                    </form>
                                </div>

                              



                             
                                <div class="hidden tab-pane" id="career">
                                    <form action="{{route('admin.storeCareer.store') }}" method="POST" id="career-form">
                                    @csrf

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

                                    @if (session()->has('user_id'))
                                        <input type="hidden" name="user_id" value="{{ session('user_id') }}">
                                    @endif

                                    <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>
                                        </div>
                                        @if ($working_m->status == '1')
                                        <div class="card-body p-4 bg-black">
                                            <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 }}"
                                                                {{ old('working_sector_id', $user_detail_old->working_sector_id ?? '') == $workingSector->id ? 'selected' : '' }}>
                                                            {{ $workingSector->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="flex justify-end gap-2 mt-4">
                                                @if (session()->has('user_id'))
                                                <a href="javascript:void(0);"  onclick="confirmDelete('{{ route('admin.members.cancel', session('user_id')) }}', {{ session('user_id') }})"
                                                        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">
                                                        Cancel
                                                    </a>
                                                 @else
                                                 <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">
                                                    cancel
                                                 </a>   
                                                 @endif
                                                <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('Next') }}</button>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                    </form>
                                </div>
                            


                                <div class="hidden tab-pane" id="about-me">
                                    <form action="{{route('admin.storeUserData.store') }}" method="POST" id="about-me-form">
                                    @csrf

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

                                    @if (session()->has('user_id'))
                                        <input type="hidden" name="user_id" value="{{ session('user_id') }}">
                                    @endif

                                    <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}}" {{ old('length_id', $user_detail_old->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 value="" selected>{{ translate('Select') }}</option>
                                                        @foreach ($eyeColors as $eyeColor)
                                                            <option value="{{ $eyeColor->id }}" {{ old('eye_color_id', $user_detail_old->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 }}" {{ old('hair_color_id', $user_detail_old->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 }}" {{ old('body_type_id', $user_detail_old->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="number" name="weight" id="weight" value="{{ old('weight', $user_detail_old->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')" required>
                                                </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 }}" {{ old('appearance_id', $user_detail_old->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 value="" selected>{{ translate('Select') }}</option>
                                                        @foreach ($clothingStyles as $clothingStyle)
                                                            <option value="{{ $clothingStyle->id }}" {{ old('clothing_style_id', $user_detail_old->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 }}"
                                                                {{ old('intelligence_id', $user_detail_old->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 }}"
                                                                {{ old('languages', $user_detail_old->languages ?? '') == $language->id ? 'selected' : '' }}>
                                                                {{ $language->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif

                                            </div>

                                            <div class="flex justify-end gap-2 mt-4">
                                                @if (session()->has('user_id'))
                                                <a href="javascript:void(0);"  onclick="confirmDelete('{{ route('admin.members.cancel', session('user_id')) }}', {{ session('user_id') }})"
                                                        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">
                                                        Cancel
                                                    </a>
                                                 @else
                                                 <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">
                                                    cancel
                                                 </a>   
                                                 @endif
                                                <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('Next') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                    </form>
                                </div>


                            
                                <div class="hidden tab-pane" id="language">
                                    <form action="{{route('admin.storeLanguage.store') }}" method="POST" id="language-form">
                                    @csrf

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

                                    @if (session()->has('user_id'))
                                        <input type="hidden" name="user_id" value="{{ session('user_id') }}">
                                    @endif

                                   

                                    <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 }}"
                                                            {{ old('mother_tongue_id', $user_detail_old->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>
                                                    @foreach ($knownLanguages as $knownLanguage)
                                                        <option value="{{ $knownLanguage->id }}"
                                                            @php
                                                                $selectedLanguages = explode(',', $user_detail_old->known_languages ?? '');
                                                            @endphp
                                                            {{ in_array($knownLanguage->id, $selectedLanguages) ? 'selected' : '' }}>
                                                            {{ $knownLanguage->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            @endif
                                            <div class="flex justify-end gap-2 mt-4">
                                                @if (session()->has('user_id'))
                                                <a href="javascript:void(0);"  onclick="confirmDelete('{{ route('admin.members.cancel', session('user_id')) }}', {{ session('user_id') }})"
                                                        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">
                                                        Cancel
                                                    </a>
                                                 @else
                                                 <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">
                                                    cancel
                                                 </a>   
                                                 @endif
                                                <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('Next') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                    


                                </form>
                                </div>
                               


                                <div class="hidden tab-pane" id="hobbies-and-interest">
                                    <form action="{{route('admin.storeHobbies.store') }}" method="POST" id="hobbies-form">
                                    @csrf

                                    <input type="hidden" name="active_tab" value="{{ old('active_tab', 'personal-attitude-and-behavior') }}" >

                                    @if (session()->has('user_id'))
                                        <input type="hidden" name="user_id" value="{{ session('user_id') }}">
                                    @endif

                                    <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 }}"
                                                                {{ old('sports', $user_detail_old->sports ?? '') == $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 }}"
                                                                {{ old('music', $user_detail_old->music ?? '') == $music->id ? 'selected' : '' }}>
                                                                {{ $music->name }}
                                                            </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 }}"
                                                                {{ old('kitchen', $user_detail_old->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 }}"
                                                                {{ old('reading', $user_detail_old->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 }}"
                                                            {{ old('tv_shows', $user_detail_old->tv_shows ?? '') == $tvShow->id ? 'selected' : '' }}>
                                                        {{ $tvShow->name }}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                @endif
                                            </div>
                                            <div class="flex justify-end gap-2 mt-4">
                                                @if (session()->has('user_id'))
                                                <a href="javascript:void(0);"  onclick="confirmDelete('{{ route('admin.members.cancel', session('user_id')) }}', {{ session('user_id') }})"
                                                        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">
                                                        Cancel
                                                    </a>
                                                 @else
                                                 <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">
                                                    cancel
                                                 </a>   
                                                 @endif
                                                <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('Next') }}</button>
                                            </div>
                                        </div>
                                    </div>
                                   </form>
                                </div>



                                <div class="hidden tab-pane" id="personal-attitude-and-behavior">
                                    <form action="{{route('admin.storePersonal.store') }}" method="POST">
                                    @csrf

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

                                    @if (session()->has('user_id'))
                                        <input type="hidden" name="user_id" value="{{ session('user_id') }}">
                                    @endif

                                    <div class="card m-5">
                                        <div class="card-header p-2 bg-slate-900">
                                            <h4 class="text-white">{{ translate('Personal Attitude & Behavior') }}</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="thinking"
                                                            class="form-checkbox h-5 w-5 text-red-600 rounded border-gray-300 focus:ring-red-500"
                                                            @if (in_array($attitude->id, explode(',', $user_detail_old->personal_attitude ?? '')))
                                                            checked
                                                        @endif>
                                                        <label style="color: black;" for="thinking" class="ml-2 text-base font-medium text-white cursor-pointer">{{$attitude->name}}</label>
                                                    </div>
                                                @endforeach

                                            </div>
                                            <div class="flex justify-end gap-2 mt-4">
                                                @if (session()->has('user_id'))
                                                <a href="javascript:void(0);"  onclick="confirmDelete('{{ route('admin.members.cancel', session('user_id')) }}', {{ session('user_id') }})"
                                                        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">
                                                        Cancel
                                                    </a>
                                                 @else
                                                 <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">
                                                    cancel
                                                 </a>   
                                                 @endif
                                                <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('Next') }}</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">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">
                                                </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="religion_id" class="inline-block mb-2 text-base font-medium">Religion</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">
                                                        <option selected>Select</option>
                                                        @foreach($religions as $religion)
                                                            <option value="{{ $religion->id }}">{{ $religion->name }}</option>
                                                        @endforeach
                                                    </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>
                                                        {{-- @foreach ($casts as $cast)
                                                            <option value="{{ $casts->id }}">{{ $casts->name }}</option>
                                                        @endforeach --}}
                                                    </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">
                                                @if (session()->has('user_id'))
                                                <a href="javascript:void(0);"  onclick="confirmDelete('{{ route('admin.members.cancel', session('user_id')) }}', {{ session('user_id') }})"
                                                        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">
                                                        Cancel
                                                    </a>
                                                 @else
                                                 <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">
                                                    cancel
                                                 </a>   
                                                 @endif
                                                <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">
                                    <form action="{{route('admin.storeLifeStyle.store') }}" method="POST">
                                    @csrf

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

                                    @if (session()->has('user_id'))
                                        <input type="hidden" name="user_id" value="{{ session('user_id') }}">
                                    @endif

                                    <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="" selected>{{ translate('Select') }}</option>
                                                        <option value="yes" {{ (old('smoke', $user_detail_old->smoke ?? '') == 'yes') ? 'selected' : '' }}>{{ translate('Yes') }}</option>
                                                        <option value="no" {{ (old('smoke', $user_detail_old->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="" selected>{{ translate('Select') }}</option>
                                                        <option value="yes" {{ (old('drinking', $user_detail_old->drinking ?? '') == 'yes') ? 'selected' : '' }}>{{ translate('Yes') }}</option>
                                                        <option value="no" {{ (old('drinking', $user_detail_old->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="" selected>{{ translate('Select') }}</option>
                                                        <option value="yes" {{ (old('going_out', $user_detail_old->going_out ?? '') == 'yes') ? 'selected' : '' }}>{{ translate('Yes') }}</option>
                                                        <option value="no" {{ (old('going_out', $user_detail_old->going_out ?? '') == 'no') ? 'selected' : '' }}>{{ translate('No') }}</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="flex justify-end gap-2 mt-4">
                                                @if (session()->has('user_id'))
                                                <a href="javascript:void(0);"  onclick="confirmDelete('{{ route('admin.members.cancel', session('user_id')) }}', {{ session('user_id') }})"
                                                        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">
                                                        Cancel
                                                    </a>
                                                 @else
                                                 <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">
                                                    cancel
                                                 </a>   
                                                 @endif
                                                <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('Next') }}</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">
                                                @if (session()->has('user_id'))
                                                <a href="javascript:void(0);"  onclick="confirmDelete('{{ route('admin.members.cancel', session('user_id')) }}', {{ session('user_id') }})"
                                                        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">
                                                        Cancel
                                                    </a>
                                                 @else
                                                 <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">
                                                    cancel
                                                 </a>   
                                                 @endif
                                                <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">
                                    <form action="{{route('admin.storePartner.store') }}" method="POST" id="partner-expectation-form">
                                    @csrf

                                    @if (session()->has('user_id'))
                                        <input type="hidden" name="user_id" value="{{ session('user_id') }}">
                                    @endif

                                    <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}}"
                                                                {{ old('origin', $user_partner_old->origin ?? '') == $origin->id ? 'selected' : '' }}>
                                                            {{$origin->name}}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                    @error('origin')
                                                        <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"  class="inline-block mb-2 text-base font-medium">{{ translate('Am Looking for') }}</label>
                                                    <select id="am_looking_for" name="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 }}" {{ old('am_looking_for', $user_partner_old->am_looking_for ?? '') == $amLookingFor->id ? 'selected' : '' }}>{{ $amLookingFor->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    @error('am_looking_for')
                                                        <span class="text-red-500 text-sm">{{ $message }}</span>
                                                    @enderror
                                                </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}}"
                                                                {{ old('length', $user_partner_old->length ?? '') == $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 }}"
                                                                {{ old('religion', $user_partner_old->religion ?? '') == $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>Select</option>
                                                        @foreach($relationStatus as $status)
                                                            <option value="{{ $status->id }}"
                                                                {{ old('relation_status', $user_partner_old->relation_status ?? '') == $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 }}"
                                                                {{ old('education_id', $user_partner_old->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') }}<span class="text-red-500">*</span></label>
                                                    <input type="number" id="weight" name="weight" value="{{ old('weight', $user_partner_old->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="" selected>{{ translate('Select')}}</option>
                                                        <option value="yes" {{ (old('smoke', $user_partner_old->smoke ?? '') == 'yes') ? 'selected' : '' }}>{{ translate('Yes') }}</option>
                                                        <option value="no" {{ (old('smoke', $user_partner_old->smoke ?? '') == 'no') ? '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="" selected>Select</option>
                                                        <option value="yes" {{ (old('drinking', $user_partner_old->drinking ?? '') == 'yes') ? 'selected' : '' }}>{{ translate('Yes') }}</option>
                                                        <option value="no" {{ (old('drinking', $user_partner_old->drinking ?? '') == 'no') ? '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="" selected>Select</option>
                                                        <option value="yes" {{ (old('going_out', $user_partner_old->going_out ?? '') == 'yes') ? 'selected' : '' }}>{{ translate('Yes') }}</option>
                                                        <option value="no" {{ (old('going_out', $user_partner_old->going_out ?? '') == 'no') ? '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 value="" selected>{{ translate('Select') }}</option>
                                                        @foreach ($childerns as $childern)
                                                            <option value="{{ $childern->id }}"
                                                                {{ old('childeren_id', $user_partner_old->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 value="" selected>{{ translate('Select') }}</option>
                                                        @foreach ($cast as $part_cast)
                                                            <option value="{{ $part_cast->id }}"
                                                                {{ old('partner_cast', $user_partner_old->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">Sub Cast</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 value="" selected>{{ translate('Select') }}</option>
                                                        @foreach ($subcast as $part_subcast)
                                                            <option value="{{ $part_subcast->id }}"
                                                                {{ old('partner_cast', $user_partner_old->sub_cast ?? '') == $part_subcast->id ? 'selected' : '' }}>
                                                            {{ $part_subcast->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                               @endif

                                         
                                                <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="{{ old('from_age', $user_partner_old->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="{{ old('to_age', $user_partner_old->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 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 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($countries as $country)
                                                            <option value="{{ $country->id }}" {{ old('country', $user_partner_old->country_id ?? '') == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="col-span-1">
                                                    <label for="state">{{ translate('State') }} *</label>
                                                    <select name="state" id="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>
                                                    </select>
                                                </div>
                                           
                                                <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>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="flex justify-end gap-2 mt-4">
                                                @if (session()->has('user_id'))
                                                <a href="javascript:void(0);"  onclick="confirmDelete('{{ route('admin.members.cancel', session('user_id')) }}', {{ session('user_id') }})"
                                                        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">
                                                        Cancel
                                                    </a>
                                                 @else
                                                 <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">
                                                    cancel
                                                 </a>   
                                                 @endif
                                                <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('Create') }}</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>
    // 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.addEventListener('DOMContentLoaded', function () {
        // Function to activate a tab
        function activateTab(tabId) {
            // Deactivate all tabs
            document.querySelectorAll('[data-tab-toggle]').forEach(function (tab) {
                const targetTab = tab.getAttribute('data-target');
                document.querySelector(`#${targetTab}`).classList.add('hidden');
                tab.parentElement.classList.remove('active');
            });

            // Activate the selected tab
            document.querySelector(`#${tabId}`).classList.remove('hidden');
            document.querySelector(`[data-target="${tabId}"]`).parentElement.classList.add('active');
        }

        // Get the validated tabs from the session
        let validatedTabs = @json(session('check_tab_validation', []));

        // Listen for tab clicks
        document.querySelectorAll('[data-tab-toggle]').forEach(function (tabLink) {
            tabLink.addEventListener('click', function () {
                const targetTab = tabLink.getAttribute('data-target');

                // Check if the clicked tab ID exists in the validatedTabs array
                if (validatedTabs.includes(targetTab)) {
                    // If it exists, activate the tab
                    activateTab(targetTab);
                } else {
                    // Show SweetAlert instead of a regular alert
                    Swal.fire({
                        icon: 'warning',
                        title: 'Incomplete Information',
                        text: 'Please complete the first fields in this section before proceeding to the next step. Thank you!',
                        confirmButtonText: 'OK'
                    }).then(() => {
                        // Activate the last validated tab after the alert is closed
                        activateTab(validatedTabs[validatedTabs.length - 1]);
                    });
                }
            });
        });

        // Automatically activate the last validated tab or show the default tab
        if (validatedTabs.length > 0) {
            activateTab(validatedTabs[validatedTabs.length - 1]); // Activate the last validated tab
        } else {
            // Show default tab if no validated tab exists
            activateTab('basic-information');  // Default tab to show
        }
    });
</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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>




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

                        // Load cities when states have been populated
                        // if (selectedStateId) {
                        //     $('#state').val(selectedStateId).trigger('change');
                        // } else {
                        //     $('#city').empty().append('<option value="">Select City</option>');
                        // }
                    }
                });
            } else {
                $('#state').empty().append('<option value="">Select State</option>');
                $('#city').empty().append('<option value="">Select City</option>');
            }
        }

        function loadCities(stateId, selectedCityId = null) {
            if (stateId) {
                $.ajax({
                    url: '{{ route('admin.getCities', ':state') }}'.replace(':state', stateId),
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {

                        $('#city').empty().append('<option value="">Select City</option>');
                        $.each(data, function(key, city) {
                            $('#city').append('<option value="' + city.id + '"' + (selectedCityId == city.id ? ' selected' : '') + '>' + city.name + '</option>'); // Set selected city
                        });
                    }
                });
            } else {
                $('#city').empty().append('<option value="">Select City</option>');
            }
        }

        // When the country dropdown changes
        $('#country').change(function() {

            var countryId = $(this).val();
            loadStates(countryId);
        });

        // When the state dropdown changes
        $('#state').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 = "{{ $user_partner_old->state_id ?? null }}"; // If state_id exists, use it; else, null
        var selectedCityId = "{{ $user_partner_old->city_id ?? null }}";

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

        // Ensure cities are loaded if a state is preselected
        if (selectedStateId && selectedCountryId) {
            loadCities(selectedStateId, selectedCityId); // Load cities and select a city
        }
    });
</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%'
        });

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

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


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

        $('#state_id').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%'
        });

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

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


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

        $('#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%'
        });


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

        $('#partner_cast').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>


<style>
    .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>



<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;
        }
    
    
        document.getElementById('dob').value = dob.toISOString().split('T')[0]; 
        document.getElementById('age').value = age; 
    }
</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>


<script>
    function confirmDelete(url, id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, Cancel it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = `${url}`;
            }
        });
    }
</script>



@endsection

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