@extends('layouts.master')

@section('styles')
	<!-- CHOICES CSS -->
	<link rel="stylesheet" href="{{ asset('build/assets/libs/choices.js/public/assets/styles/choices.min.css') }}">

	<!-- FLATPICKR CSS -->
	<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
@endsection

@section('content')
	<div class="content">

		<!-- Start::main-content -->
		<div class="main-content">

			<!-- Page Header -->
			<div class="block justify-between page-header sm:flex">
				<div>
					<h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium"> Profile
						Settings</h3>
				</div>
				<ol class="flex items-center whitespace-nowrap min-w-0">
					<li class="text-sm">
						<a class="flex items-center font-semibold text-primary hover:text-primary dark:text-primary truncate"
							href="javascript:void(0);">
							Pages
							<i
								class="ti ti-chevrons-right flex-shrink-0 mx-3 overflow-visible text-gray-300 dark:text-gray-300 rtl:rotate-180"></i>
						</a>
					</li>
					<li class="text-sm text-gray-500 hover:text-primary dark:text-white/70 " aria-current="page">
						Profile Settings
					</li>
				</ol>
			</div>
			<!-- Page Header Close -->

			<!-- Start::row-1 -->
			<div class="grid grid-cols-12 gap-x-6">
				<div class="col-span-12 xl:col-span-3">
					<div class="box">
						<div class="box-body relative">
							<div class="flex relative before:bg-black/50 before:absolute before:w-full before:h-full before:rounded-sm">
								<img src="{{ asset('build/assets/img/png-images/2.png') }}" alt="" class="h-[200px] w-full rounded-sm"
									id="profile-img2">
								<span
									class="absolute top-5 ltr:right-5 rtl:left-5 flex p-2 rounded-sm ring-1 ring-black/10 text-white bg-black/10 leading-none">
									<i class="ri ri-pencil-line"></i>
									<input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" id="profile-change2">
								</span>
							</div>
							<div class="absolute top-[4.5rem] inset-x-0 text-center space-y-3">
								<div class="flex justify-center w-full">
									<div class="relative">
										<img src="{{ asset('build/assets/img/users/1.jpg') }}"
											class="w-24 h-24 rounded-full ring-4 ring-white/10 mx-auto" id="profile-img" alt="pofile-img">
										<span
											class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white/10 text-white bg-white/10 dark:bg-bgdark leading-none">
											<i class="ri ri-pencil-line"></i>
											<input type="file" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" id="profile-change">
										</span>
									</div>
								</div>
							</div>
						</div>
						<div class="box-body pt-0">
							<nav class="flex flex-col space-y-2" aria-label="Tabs" role="tablist" data-hs-tabs-vertical="true">
								<button type="button"
									class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white -mr-px py-3 px-3 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 active"
									id="profile-settings-item-1" data-hs-tab="#profile-settings-1" aria-controls="profile-settings-1"
									role="tab">
									<i class="ri ri-shield-user-line"></i> Personal Settings
								</button>
								<button type="button"
									class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white -mr-px py-3 px-3 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
									id="profile-settings-item-2" data-hs-tab="#profile-settings-2" aria-controls="profile-settings-2"
									role="tab">
									<i class="ri ri-global-line"></i> General Settings
								</button>
								<button type="button"
									class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white -mr-px py-3 px-3 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
									id="profile-settings-item-3" data-hs-tab="#profile-settings-3" aria-controls="profile-settings-3"
									role="tab">
									<i class="ri ri-lock-line"></i> Password Settings
								</button>
								<button type="button"
									class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white -mr-px py-3 px-3 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
									id="profile-settings-item-4" data-hs-tab="#profile-settings-4" aria-controls="profile-settings-4"
									role="tab">
									<i class="ri ri-account-circle-line"></i> Account Settings
								</button>
								<button type="button"
									class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white -mr-px py-3 px-3 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
									id="profile-settings-item-5" data-hs-tab="#profile-settings-5" aria-controls="profile-settings-5"
									role="tab">
									<i class="ri ri-notification-4-line"></i> Notifications Settings
								</button>
							</nav>
						</div>
					</div>
				</div>
				<div class="col-span-12 xl:col-span-9">
					<div class="box">
						<div class="box-body p-0">
							<div id="profile-settings-1" role="tabpanel" aria-labelledby="profile-settings-item-1">
								<div class="box border-0 shadow-none mb-0">
									<div class="box-header">
										<h5 class="box-title leading-none flex"><i class="ri ri-shield-user-line ltr:mr-2 rtl:ml-2"></i> Personal
											Settings</h5>
									</div>
									<div class="box-body">
										<div>
											<div class="grid lg:grid-cols-2 gap-6">
												<div class="space-y-2">
													<label class="ti-form-label mb-0">First Name</label>
													<input type="text" class="my-auto ti-form-input" placeholder="Firstname">
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Last Name</label>
													<input type="text" class="my-auto ti-form-input" placeholder="Lastname">
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Phone Number</label>
													<input type="number" class="my-auto ti-form-input" placeholder="+91 123-456-789">
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Email Address</label>
													<input type="email" class="my-auto ti-form-input" placeholder="your@site.com">
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Date Of Birth</label>
													<input type="text" class="ti-form-input flatpickr-input date" placeholder="Choose date" readonly>
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Gender</label>
													<ul class="flex flex-col sm:flex-row">
														<li
															class="ti-list-group gap-x-2.5 bg-white border text-gray-800 ltr:sm:-ml-px rtl:sm:-mr-px sm:mt-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:first:rounded-bl-sm rtl:sm:first:rounded-br-sm ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-tr-sm rtl:sm:last:rounded-tl-sm dark:bg-bgdark dark:border-white/10 dark:text-white">
															<div class="relative flex items-start w-full">
																<div class="flex items-center h-5">
																	<input id="hs-horizontal-list-group-item-radio-1" name="hs-horizontal-list-group-item-radio"
																		type="radio" class="ti-form-radio" checked>
																</div>
																<label for="hs-horizontal-list-group-item-radio-1"
																	class="ltr:ml-3 rtl:mr-3 block w-full text-sm text-gray-600 dark:text-white/70">
																	Female
																</label>
															</div>
														</li>

														<li
															class="ti-list-group gap-x-2.5 bg-white border text-gray-800 ltr:sm:-ml-px rtl:sm:-mr-px sm:mt-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:first:rounded-bl-sm rtl:sm:first:rounded-br-sm ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-tr-sm rtl:sm:last:rounded-tl-sm dark:bg-bgdark dark:border-white/10 dark:text-white">
															<div class="relative flex items-start w-full">
																<div class="flex items-center h-5">
																	<input id="hs-horizontal-list-group-item-radio-2" name="hs-horizontal-list-group-item-radio"
																		type="radio" class="ti-form-radio">
																</div>
																<label for="hs-horizontal-list-group-item-radio-2"
																	class="ltr:ml-3 rtl:mr-3 block w-full text-sm text-gray-600 dark:text-white/70">
																	Male
																</label>
															</div>
														</li>

														<li
															class="ti-list-group gap-x-2.5 bg-white border text-gray-800 ltr:sm:-ml-px rtl:sm:-mr-px sm:mt-0 ltr:sm:first:rounded-tr-none rtl:sm:first:rounded-tl-none ltr:sm:first:rounded-bl-sm rtl:sm:first:rounded-br-sm ltr:sm:last:rounded-bl-none rtl:sm:last:rounded-br-none ltr:sm:last:rounded-tr-sm rtl:sm:last:rounded-tl-sm dark:bg-bgdark dark:border-white/10 dark:text-white">
															<div class="relative flex items-start w-full">
																<div class="flex items-center h-5">
																	<input id="hs-horizontal-list-group-item-radio-3" name="hs-horizontal-list-group-item-radio"
																		type="radio" class="ti-form-radio">
																</div>
																<label for="hs-horizontal-list-group-item-radio-3"
																	class="ltr:ml-3 rtl:mr-3 block w-full text-sm text-gray-600 dark:text-white/70">
																	Others
																</label>
															</div>
														</li>
													</ul>
												</div>
											</div>
											<div class="my-5">
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Address</label>
													<input type="text" class="my-auto ti-form-input" placeholder="Address">
												</div>
											</div>
											<div class="grid lg:grid-cols-2 gap-6">
												<div class="space-y-2">
													<label class="ti-form-label mb-0">City</label>
													<input type="text" class="my-auto ti-form-input" placeholder="city">
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Country</label>
													<input type="text" class="my-auto ti-form-input" placeholder="state">
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">State</label>
													<input type="text" class="my-auto ti-form-input" placeholder="state">
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Pincode</label>
													<input type="number" class="my-auto ti-form-input" placeholder="pincode">
												</div>
											</div>
											<div class="mt-5">
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Bio</label>
													<textarea class="ti-form-input" rows="3" placeholder="Add Your Bio"></textarea>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div id="profile-settings-2" class="hidden" role="tabpanel" aria-labelledby="profile-settings-item-2">
								<div class="box border-0 shadow-none mb-0">
									<div class="box-header">
										<h5 class="box-title leading-none flex"><i class="ri ri-global-line ltr:mr-2 rtl:ml-2"></i> General Settings
										</h5>
									</div>
									<div class="box-body">
										<h5 class="text-base font-semibold">User Details</h5>
										<div class="my-4">
											<div class="grid lg:grid-cols-2 gap-6 mb-6">
												<div class="space-y-2">
													<label class="ti-form-label mb-0">User Id</label>
													<input type="text" class="my-auto ti-form-input" placeholder="User Id">
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Joining Date</label>
													<input type="text" class="ti-form-input flatpickr-input date" placeholder="Choose date" readonly>
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Language</label>
													<select class="ti-form-select" data-trigger>
														<option value="1" selected>US English</option>
														<option value="2">Arabic</option>
														<option value="3">Korean</option>
														<option value="4">Russia</option>
													</select>
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Time Zone</label>
													<select class="ti-form-select" data-trigger>
														<option value="Pacific/Midway">(GMT-11:00) Midway Island, Samoa</option>
														<option value="America/Adak">(GMT-10:00) Hawaii-Aleutian</option>
														<option value="Etc/GMT+10">(GMT-10:00) Hawaii</option>
														<option value="Pacific/Marquesas">(GMT-09:30) Marquesas Islands</option>
														<option value="Pacific/Gambier">(GMT-09:00) Gambier Islands</option>
														<option value="America/Anchorage">(GMT-09:00) Alaska</option>
														<option value="America/Ensenada">(GMT-08:00) Tijuana, Baja California</option>
														<option value="Etc/GMT+8">(GMT-08:00) Pitcairn Islands</option>
														<option value="America/Los_Angeles">(GMT-08:00) Pacific Time (US &amp; Canada)</option>
														<option value="America/Denver">(GMT-07:00) Mountain Time (US &amp; Canada)</option>
														<option value="America/Chihuahua">(GMT-07:00) Chihuahua, La Paz, Mazatlan</option>
														<option value="America/Dawson_Creek">(GMT-07:00) Arizona</option>
														<option value="America/Belize">(GMT-06:00) Saskatchewan, Central America</option>
														<option value="America/Cancun">(GMT-06:00) Guadalajara, Mexico City, Monterrey</option>
														<option value="Chile/EasterIsland">(GMT-06:00) Easter Island</option>
														<option value="America/Chicago">(GMT-06:00) Central Time (US &amp; Canada)</option>
														<option value="America/New_York">(GMT-05:00) Eastern Time (US &amp; Canada)</option>
														<option value="America/Havana">(GMT-05:00) Cuba</option>
														<option value="America/Bogota">(GMT-05:00) Bogota, Lima, Quito, Rio Branco</option>
														<option value="America/Caracas">(GMT-04:30) Caracas</option>
														<option value="America/Santiago">(GMT-04:00) Santiago</option>
														<option value="America/La_Paz">(GMT-04:00) La Paz</option>
														<option value="Atlantic/Stanley">(GMT-04:00) Faukland Islands</option>
														<option value="America/Campo_Grande">(GMT-04:00) Brazil</option>
														<option value="America/Goose_Bay">(GMT-04:00) Atlantic Time (Goose Bay)</option>
														<option value="America/Glace_Bay">(GMT-04:00) Atlantic Time (Canada)</option>
														<option value="America/St_Johns">(GMT-03:30) Newfoundland</option>
														<option value="America/Araguaina">(GMT-03:00) UTC-3</option>
														<option value="America/Montevideo">(GMT-03:00) Montevideo</option>
														<option value="America/Miquelon">(GMT-03:00) Miquelon, St. Pierre</option>
														<option value="America/Godthab">(GMT-03:00) Greenland</option>
														<option value="America/Argentina/Buenos_Aires">(GMT-03:00) Buenos Aires</option>
														<option value="America/Sao_Paulo">(GMT-03:00) Brasilia</option>
														<option value="America/Noronha">(GMT-02:00) Mid-Atlantic</option>
														<option value="Atlantic/Cape_Verde">(GMT-01:00) Cape Verde Is.</option>
														<option value="Atlantic/Azores">(GMT-01:00) Azores</option>
														<option value="Europe/Belfast">(GMT) Greenwich Mean Time : Belfast</option>
														<option value="Europe/Dublin">(GMT) Greenwich Mean Time : Dublin</option>
														<option value="Europe/Lisbon">(GMT) Greenwich Mean Time : Lisbon</option>
														<option value="Europe/London">(GMT) Greenwich Mean Time : London</option>
														<option value="Africa/Abidjan">(GMT) Monrovia, Reykjavik</option>
														<option value="Europe/Amsterdam">(GMT+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna</option>
														<option value="Europe/Belgrade">(GMT+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague</option>
														<option value="Europe/Brussels">(GMT+01:00) Brussels, Copenhagen, Madrid, Paris</option>
														<option value="Africa/Algiers">(GMT+01:00) West Central Africa</option>
														<option value="Africa/Windhoek">(GMT+01:00) Windhoek</option>
														<option value="Asia/Beirut">(GMT+02:00) Beirut</option>
														<option value="Africa/Cairo">(GMT+02:00) Cairo</option>
														<option value="Asia/Gaza">(GMT+02:00) Gaza</option>
														<option value="Africa/Blantyre">(GMT+02:00) Harare, Pretoria</option>
														<option value="Asia/Jerusalem">(GMT+02:00) Jerusalem</option>
														<option value="Europe/Minsk">(GMT+02:00) Minsk</option>
														<option value="Asia/Damascus">(GMT+02:00) Syria</option>
														<option value="Europe/Moscow">(GMT+03:00) Moscow, St. Petersburg, Volgograd</option>
														<option value="Africa/Addis_Ababa">(GMT+03:00) Nairobi</option>
														<option value="Asia/Tehran">(GMT+03:30) Tehran</option>
														<option value="Asia/Dubai">(GMT+04:00) Abu Dhabi, Muscat</option>
														<option value="Asia/Yerevan">(GMT+04:00) Yerevan</option>
														<option value="Asia/Kabul">(GMT+04:30) Kabul</option>
														<option value="Asia/Yekaterinburg">(GMT+05:00) Ekaterinburg</option>
														<option value="Asia/Tashkent">(GMT+05:00) Tashkent</option>
														<option value="Asia/Kolkata">(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi</option>
														<option value="Asia/Katmandu">(GMT+05:45) Kathmandu</option>
														<option value="Asia/Dhaka">(GMT+06:00) Astana, Dhaka</option>
														<option value="Asia/Novosibirsk">(GMT+06:00) Novosibirsk</option>
														<option value="Asia/Rangoon">(GMT+06:30) Yangon (Rangoon)</option>
														<option value="Asia/Bangkok">(GMT+07:00) Bangkok, Hanoi, Jakarta</option>
														<option value="Asia/Krasnoyarsk">(GMT+07:00) Krasnoyarsk</option>
														<option value="Asia/Hong_Kong">(GMT+08:00) Beijing, Chongqing, Hong Kong, Urumqi</option>
														<option value="Asia/Irkutsk">(GMT+08:00) Irkutsk, Ulaan Bataar</option>
														<option value="Australia/Perth">(GMT+08:00) Perth</option>
														<option value="Australia/Eucla">(GMT+08:45) Eucla</option>
														<option value="Asia/Tokyo">(GMT+09:00) Osaka, Sapporo, Tokyo</option>
														<option value="Asia/Seoul">(GMT+09:00) Seoul</option>
														<option value="Asia/Yakutsk">(GMT+09:00) Yakutsk</option>
														<option value="Australia/Adelaide">(GMT+09:30) Adelaide</option>
														<option value="Australia/Darwin">(GMT+09:30) Darwin</option>
														<option value="Australia/Brisbane">(GMT+10:00) Brisbane</option>
														<option value="Australia/Hobart">(GMT+10:00) Hobart</option>
														<option value="Asia/Vladivostok">(GMT+10:00) Vladivostok</option>
														<option value="Australia/Lord_Howe">(GMT+10:30) Lord Howe Island</option>
														<option value="Etc/GMT-11">(GMT+11:00) Solomon Is., New Caledonia</option>
														<option value="Asia/Magadan">(GMT+11:00) Magadan</option>
														<option value="Pacific/Norfolk">(GMT+11:30) Norfolk Island</option>
														<option value="Asia/Anadyr">(GMT+12:00) Anadyr, Kamchatka</option>
														<option value="Pacific/Auckland">(GMT+12:00) Auckland, Wellington</option>
														<option value="Etc/GMT-12">(GMT+12:00) Fiji, Kamchatka, Marshall Is.</option>
														<option value="Pacific/Chatham">(GMT+12:45) Chatham Islands</option>
														<option value="Pacific/Tongatapu">(GMT+13:00) Nuku'alofa</option>
														<option value="Pacific/Kiritimati">(GMT+14:00) Kiritimati</option>
													</select>
												</div>
											</div>
											<div class="space-y-2" id="skills">
												<label class="ti-form-label">Skills</label>
												<input class="ti-form-input skills" type="text" value="Laravel ,Angular ,Html ,React ,Bootstrap"
													placeholder="This is a placeholder">
											</div>
										</div>
										<h5 class="text-base font-semibold">Education Details</h5>
										<div class="my-4">
											<div class="grid lg:grid-cols-3 gap-6">
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Schooling</label>
													<input type="text" class="my-auto ti-form-input" placeholder="Schooling">
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Joining Date</label>
													<input type="text" class="ti-form-input flatpickr-input date" placeholder="Choose date" readonly>
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Completed Date</label>
													<input type="text" class="ti-form-input flatpickr-input date" placeholder="Choose date" readonly>
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Graduation</label>
													<input type="text" class="my-auto ti-form-input" placeholder="Graduation">
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Joining Date</label>
													<input type="text" class="ti-form-input flatpickr-input date" placeholder="Choose date" readonly>
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Completed Date</label>
													<input type="text" class="ti-form-input flatpickr-input date" placeholder="Choose date" readonly>
												</div>
											</div>
										</div>
										<h5 class="text-base font-semibold">Work Experience</h5>
										<div class="my-4">
											<div class="grid lg:grid-cols-4 gap-6">
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Work 1 :</label>
													<input type="text" class="my-auto ti-form-input" placeholder="company Name">
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Designation</label>
													<input type="text" class="my-auto ti-form-input" placeholder="Designation">
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Joining Date</label>
													<input type="text" class="ti-form-input flatpickr-input date" placeholder="Choose date" readonly>
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Completed Date</label>
													<input type="text" class="ti-form-input flatpickr-input date" placeholder="Choose date" readonly>
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Work 2 :</label>
													<input type="text" class="my-auto ti-form-input" placeholder="company Name">
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Designation</label>
													<input type="text" class="my-auto ti-form-input" placeholder="Designation">
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Joining Date</label>
													<input type="text" class="ti-form-input flatpickr-input date" placeholder="Choose date" readonly>
												</div>
												<div class="space-y-2">
													<label class="ti-form-label mb-0">Completed Date</label>
													<input type="text" class="ti-form-input flatpickr-input date" placeholder="Choose date" readonly>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div id="profile-settings-3" class="hidden" role="tabpanel" aria-labelledby="profile-settings-item-3">
								<div class="box border-0 shadow-none mb-0">
									<div class="box-header">
										<h5 class="box-title leading-none flex"><i class="ri ri-lock-line ltr:mr-2 rtl:ml-2"></i> Password Settings
										</h5>
									</div>
									<div class="box-body p-0">
										<div class="grid grid-cols-12">
											<div
												class="col-span-12 xl:col-span-6 xl:ltr:border-r xl:rtl:border-l xl:border-b-0 border-b p-6 border-gray-200 dark:border-white/10">
												<div class="space-y-4">
													<div class="space-y-2">
														<label class="ti-form-label mb-0">Email Id<sup class="text-danger">*</sup></label>
														<input type="email" class="my-auto ti-form-input" placeholder="Email Id" required>
													</div>
													<div class="space-y-2">
														<label class="ti-form-label mb-0">Current Password<sup class="text-danger">*</sup></label>
														<input type="password" class="my-auto ti-form-input" autocomplete="off" placeholder="Current Password"
															required>
													</div>
													<div class="space-y-2">
														<label class="ti-form-label mb-0">New Password<sup class="text-danger">*</sup></label>
														<input type="password" class="my-auto ti-form-input" autocomplete="off" placeholder="New Password"
															required>
													</div>
													<div class="space-y-2">
														<label class="ti-form-label mb-0">Confirm Password<sup class="text-danger">*</sup></label>
														<input type="password" class="my-auto ti-form-input" autocomplete="off" placeholder="Confirm Password"
															required>
													</div>
													<p class="text-xs text-gray-500 dark:text-white/70">Password should be min of <b class="text-success">10
															characters <sup>*</sup> </b> (and up to 100 characters),<b class="text-success">One Upper Case
															Character<sup>*</sup></b> and <b class="text-success">One Special Character<sup>*</sup></b> e.g., ! @ # ?
														included.</p>
												</div>
											</div>
											<div class="col-span-12 xl:col-span-6">
												<div class="box border-0 shadow-none">
													<div class="box-header">
														<div class="sm:flex space-y-4">
															<h5 class="box-title my-auto">Web Linked Devices</h5>
															<button type="button" class="py-1 px-3 ti-btn ti-btn-primary text-sm m-0">Log out From All Devices
															</button>
														</div>
													</div>
													<div class="box-body">
														<ul class="flex flex-col">
															<li class="ti-list-group bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white">
																<div class="sm:flex w-full space-y-2">
																	<div class="flex space-x-3 rtl:space-x-reverse">
																		<div class="avatar rounded-sm avatar-sm bg-gray-100 dark:bg-black/20 p-2.5">
																			<i class="ri ri-smartphone-line text-xl leading-none text-gray-500 dark:text-white/70"></i>
																		</div>
																		<div class="">
																			<p class="mb-0 text-sm">Mobile-Poco-M2-Pro</p>
																			<p class="mb-0 text-gray-500 dark:text-white/70 text-xs">Manchester, UK-Nov 30, 04:45PM</p>
																		</div>
																	</div>
																	<div class="ltr:ml-auto rtl:mr-auto my-auto text-end">
																		<button type="button" class="px-2 py-1 ti-btn ti-btn-soft-info text-xs">ReWoke</button>
																		<button type="button" class="px-2 py-1 ti-btn ti-btn-soft-danger text-xs">Logout</button>
																	</div>
																</div>
															</li>
															<li class="ti-list-group bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white">
																<div class="sm:flex w-full space-y-2">
																	<div class="flex space-x-3 rtl:space-x-reverse">
																		<div class="avatar rounded-sm avatar-sm bg-gray-100 dark:bg-black/20 p-2.5">
																			<i class="ri ri-tablet-line text-xl leading-none text-gray-500 dark:text-white/70"></i>
																		</div>
																		<div class="">
																			<p class="mb-0 text-sm">Apple Tablet</p>
																			<p class="mb-0 text-gray-500 dark:text-white/70 text-xs">Manchester, UK-Nov 30, 02:45PM</p>
																		</div>
																	</div>
																	<div class="ltr:ml-auto rtl:mr-auto my-auto text-end">
																		<button type="button" class="px-2 py-1 ti-btn ti-btn-soft-info text-xs">ReWoke</button>
																		<button type="button" class="px-2 py-1 ti-btn ti-btn-soft-danger text-xs">Logout</button>
																	</div>
																</div>
															</li>
															<li class="ti-list-group bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white">
																<div class="sm:flex w-full space-y-2">
																	<div class="flex space-x-3 rtl:space-x-reverse">
																		<div class="avatar rounded-sm avatar-sm bg-gray-100 dark:bg-black/20 p-2.5">
																			<i class="ri ri-airplay-line text-xl leading-none text-gray-500 dark:text-white/70"></i>
																		</div>
																		<div class="">
																			<p class="mb-0 text-sm">Dell Desktop</p>
																			<p class="mb-0 text-gray-500 dark:text-white/70 text-xs">Manchester, UK-Nov 30, 02:45PM</p>
																		</div>
																	</div>
																	<div class="ltr:ml-auto rtl:mr-auto my-auto text-end">
																		<button type="button" class="px-2 py-1 ti-btn ti-btn-soft-info text-xs">ReWoke</button>
																		<button type="button" class="px-2 py-1 ti-btn ti-btn-soft-danger text-xs">Logout</button>
																	</div>
																</div>
															</li>
															<li class="ti-list-group bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white">
																<div class="sm:flex w-full space-y-2">
																	<div class="flex space-x-3 rtl:space-x-reverse">
																		<div class="avatar rounded-sm avatar-sm bg-gray-100 dark:bg-black/20 p-2.5">
																			<i class="ri ri-macbook-line text-xl leading-none text-gray-500 dark:text-white/70"></i>
																		</div>
																		<div class="">
																			<p class="mb-0 text-sm">Lenovo Laptop</p>
																			<p class="mb-0 text-gray-500 dark:text-white/70 text-xs">Manchester, UK-Nov 30, 02:45PM</p>
																		</div>
																	</div>
																	<div class="ltr:ml-auto rtl:mr-auto my-auto text-end">
																		<button type="button" class="px-2 py-1 ti-btn ti-btn-soft-info text-xs">ReWoke</button>
																		<button type="button" class="px-2 py-1 ti-btn ti-btn-soft-danger text-xs">Logout</button>
																	</div>
																</div>
															</li>
														</ul>
													</div>
												</div>
												<div class="my-5 px-6">
													<div class="sm:space-x-6 rtl:space-x-reverse sm:flex space-y-4">
														<label class="ti-form-label my-auto">Account :</label>
														<button type="button" class="ti-btn ti-btn-danger">
															Deactivate Account
														</button>
														<button type="button" class="ti-btn-disabled ti-btn ti-btn-success">
															Activate Account
														</button>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div id="profile-settings-4" class="hidden" role="tabpanel" aria-labelledby="profile-settings-item-4">
								<div class="box border-0 shadow-none mb-0">
									<div class="box-header">
										<h5 class="box-title leading-none flex"><i class="ri ri-account-circle-line ltr:mr-2 rtl:ml-2"></i> Account
											Settings</h5>
									</div>
									<div class="box-body">
										<div class="sm:grid grid-cols-12 gap-6 space-y-6">
											<div class="col-span-2 my-auto">
												<label class="ti-form-label mb-0">Verfication Step - 2
													<a aria-label="anchor" class="ltr:ml-2 rtl:mr-2" href="javascript:void(0);">
														<i class="ri ri-question-line"></i>
													</a>
												</label>
											</div>
											<div class="col-span-10">
												<div class="flex items-center">
													<input type="checkbox" class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5 m-0">
												</div>
											</div>
										</div>
										<div class="my-5">
											<nav class="flex space-x-2 rtl:space-x-reverse mb-4" aria-label="Tabs" role="tablist">
												<button type="button"
													class="hs-tab-active:bg-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:text-white py-2 px-4 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 active"
													id="adhar-tab" data-hs-tab="#adhar" aria-controls="adhar" role="tab">
													Adhar Number
												</button>
												<button type="button"
													class="hs-tab-active:bg-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:text-white py-2 px-4 inline-flex items-center gap-2 bg-gray-50 text-sm font-medium text-center text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
													id="mobile-tab" data-hs-tab="#mobile" aria-controls="mobile" role="tab">
													mobile Number
												</button>
											</nav>
											<div>
												<div id="adhar" role="tabpanel" aria-labelledby="adhar-tab">
													<input type="text" class="ti-form-input" placeholder="name" value="5353 2525 2525">
												</div>
												<div id="mobile" class="hidden" role="tabpanel" aria-labelledby="mobile-tab">
													<input type="number" class="ti-form-input" placeholder="name" value="9699696996">
												</div>
											</div>
										</div>
										<h5 class="text-base font-semibold ">Social Accounts</h5>
										<div class="space-y-3 mt-5">
											<div class="sm:grid grid-cols-12 gap-6 space-y-4">
												<div class="col-span-2 my-auto">
													<label class="ti-form-label">Facebook</label>
												</div>
												<div class="col-span-10">
													<input type="email" class="ti-form-input" value="https://www.facebook.com/Synto">
												</div>
											</div>
											<div class="sm:grid grid-cols-12 gap-6 space-y-4">
												<div class="col-span-2 my-auto">
													<label class="ti-form-label">Twitter</label>
												</div>
												<div class="col-span-10">
													<input type="email" class="ti-form-input" value="twitter.com/spruko.me">
												</div>
											</div>
											<div class="sm:grid grid-cols-12 gap-6 space-y-4">
												<div class="col-span-2 my-auto">
													<label class="ti-form-label">Google+</label>
												</div>
												<div class="col-span-10">
													<input type="email" class="ti-form-input" value="spruko.com">
												</div>
											</div>
											<div class="sm:grid grid-cols-12 gap-6 space-y-4">
												<div class="col-span-2 my-auto">
													<label class="ti-form-label">Linked in</label>
												</div>
												<div class="col-span-10">
													<input type="email" class="ti-form-input" value="linkedin.com/in/spruko">
												</div>
											</div>
											<div class="sm:grid grid-cols-12 gap-6 space-y-4">
												<div class="col-span-2 my-auto">
													<label class="ti-form-label">Github</label>
												</div>
												<div class="col-span-10">
													<input type="email" class="ti-form-input" value="github.com/spruko">
												</div>
											</div>
											<div class="sm:grid grid-cols-12 gap-6 space-y-4">
												<div class="col-span-2 my-auto">
													<label class="ti-form-label">Website</label>
												</div>
												<div class="col-span-10">
													<input type="email" class="ti-form-input" value="www.andersonitumay.com">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div id="profile-settings-5" class="hidden" role="tabpanel" aria-labelledby="profile-settings-item-5">
								<div class="box border-0 shadow-none mb-0">
									<div class="box-header">
										<h5 class="box-title leading-none flex"><i class="ri ri-notification-4-line ltr:mr-2 rtl:ml-2"></i>
											Notifications Settings</h5>
									</div>
									<div class="box-body">
										<div class="space-y-4">
											<div class="p-4 border border-gray-200 dark:border-white/10 rounded-sm">
												<div class="md:grid grid-cols-12 gap-6 space-y-4">
													<div class="col-span-12 md:col-span-6 my-auto">
														<p class="text-base mb-1 font-semibold">Comments</p>
														<p class="text-xs mb-0 text-gray-500 dark:text-white/70">The Comment Notifications are the notifications
															you get for your posts and replies for your comments.</p>
													</div>
													<div class="col-span-12 md:col-span-6">
														<div class="space-y-2">
															<div class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end">
																<div class="col-span-9 my-auto">
																	<label class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Notify Me</label>
																</div>
																<div class="col-span-3 my-auto">
																	<input type="checkbox" class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5" checked>
																</div>
															</div>
															<div class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end">
																<div class="col-span-9 my-auto">
																	<label class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Notify Me If
																		Mentioned</label>
																</div>
																<div class="col-span-3 my-auto">
																	<input type="checkbox" class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5">
																</div>
															</div>
															<div class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end">
																<div class="col-span-9 my-auto">
																	<label class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Notify For My Posts</label>
																</div>
																<div class="col-span-3 my-auto">
																	<input type="checkbox" class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5" checked>
																</div>
															</div>
															<div class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end">
																<div class="col-span-9 my-auto">
																	<label class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">All Comments</label>
																</div>
																<div class="col-span-3 my-auto">
																	<input type="checkbox" class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5">
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="p-4 border border-gray-200 dark:border-white/10 rounded-sm">
												<div class="md:grid grid-cols-12 gap-6 space-y-4">
													<div class="col-span-12 md:col-span-6 my-auto">
														<p class="text-base mb-1 font-semibold">Tags</p>
														<p class="text-xs mb-0 text-gray-500 dark:text-white/70">The Tag Notifications are the notifications you
															get when you are tagged for others posts.</p>
													</div>
													<div class="col-span-12 md:col-span-6">

														<div class="space-y-2">
															<div class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end">
																<div class="col-span-9 my-auto">
																	<label class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Notify Me</label>
																</div>
																<div class="col-span-3 my-auto">
																	<input type="checkbox" class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5" checked>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="p-4 border border-gray-200 dark:border-white/10 rounded-sm">
												<div class="md:grid grid-cols-12 gap-6 space-y-4">
													<div class="col-span-12 md:col-span-6 my-auto">
														<p class="text-base mb-1 font-semibold">Reminders</p>
														<p class="text-xs mb-0 text-gray-500 dark:text-white/70">The Reminder Notifications are the notifications
															you get when you missed any update .</p>
													</div>
													<div class="col-span-12 md:col-span-6">
														<div class="space-y-2">
															<div class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end">
																<div class="col-span-9 my-auto">
																	<label class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Remind Me</label>
																</div>
																<div class="col-span-3 my-auto">
																	<input type="checkbox" class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5" checked>
																</div>
															</div>
															<div class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end">
																<div class="col-span-9 my-auto">
																	<label class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Remind Me only Important
																		Updates</label>
																</div>
																<div class="col-span-3 my-auto">
																	<input type="checkbox" class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5" checked>
																</div>
															</div>
															<div class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end">
																<div class="col-span-9 my-auto">
																	<label class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Remind Me All updates</label>
																</div>
																<div class="col-span-3 my-auto">
																	<input type="checkbox" class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5">
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="p-4 border border-gray-200 dark:border-white/10 rounded-sm">
												<div class="md:grid grid-cols-12 gap-6 space-y-4">
													<div class="col-span-12 md:col-span-6 my-auto">
														<p class="text-base mb-1 font-semibold">More Activity</p>
														<p class="text-xs mb-0 text-gray-500 dark:text-white/70">The Notifications is for likes
															,comments,reactions for your profile .</p>
													</div>
													<div class="col-span-12 md:col-span-6">
														<div class="space-y-2">
															<div class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end">
																<div class="col-span-9 my-auto">
																	<label class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Notify Me</label>
																</div>
																<div class="col-span-3 my-auto">
																	<input type="checkbox" class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5">
																</div>
															</div>
															<div class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end">
																<div class="col-span-9 my-auto">
																	<label class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Notify Me only
																		Important</label>
																</div>
																<div class="col-span-3 my-auto">
																	<input type="checkbox" class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5">
																</div>
															</div>
															<div class="sm:grid grid-cols-12 gap-6 space-y-4 md:text-end">
																<div class="col-span-9 my-auto">
																	<label class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Notify Me All</label>
																</div>
																<div class="col-span-3 my-auto">
																	<input type="checkbox" class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5" checked>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="box-footer text-end space-x-3 rtl:space-x-reverse">
							<a href="javascript:void(0);" class="ti-btn m-0 ti-btn-soft-primary"><i class="ri ri-refresh-line"></i>
								Update</a>
							<a href="javascript:void(0);" class="ti-btn m-0 ti-btn-soft-secondary"><i class="ri ri-close-circle-line"></i>
								Cancel</a>
						</div>
					</div>
				</div>
			</div>
			<!-- End::row-1 -->

		</div>
		<!-- Start::main-content -->

	</div>
@endsection

@section('scripts')
	<!-- FLATPICKR JS -->
	<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>

	<!-- CHOICES JS -->
	<script src="{{ asset('build/assets/libs/choices.js/public/assets/scripts/choices.min.js') }}"></script>

	<!-- FORM-LAYOUT JS -->
	@vite('resources/assets/js/profile-settings.js')
@endsection
