@extends('backend.layouts.master')

@section('content')
	<div class="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-gray-50 before:absolute before:w-full before:h-full before:rounded-sm">
								<img src="{{ asset('img/logos') }}/{{ $insurer->logo }}" alt="" class="h-[200px] w-full rounded-sm"
									id="profile-img2">
							</div>
						</div>
						<div class="box-body pt-0">
							@include('backend.insurance.insurers.components.sidebar')
						</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">
									<div class="box mb-0">
										<div class="box-body pb-2">
											<div class="flex relative mb-4">
												<div class="flex-1">
													<div class="flex justify-between items-center mb-1 text-sm">
														<span class="text-base font-semibold text-gray-800 dark:text-white">{{ $insurer->short_name }}</span>
													</div>
													<div class="flex justify-between items-center text-xs">
														<span class="text-gray-500 dark:text-white/70">{{ __('forms.ShortName') }}</span>
													</div>
												</div>
											</div>
											<div class="grid grid-cols-12 gap-x-2">
												<div class="box shadow-none mb-2 px-2 py-1 col-span-12 md:col-span-6 xxl:col-span-3">
													<div class="flex relative border-1">
														<div class="flex-1">
															<div class="flex justify-between items-center mb-1 text-sm">
																<span class="text-base font-semibold text-gray-800 dark:text-white">{{ $insurer->pib }}</span>
																<span class="text-base font-semibold text-gray-800 dark:text-white">{{ $insurer->mb }}</span>
															</div>
															<div class="flex justify-between items-center text-xs">
																<span class="text-gray-500 dark:text-white/70">{{ __('forms.PIB') }}</span>
																<span class="text-gray-500 dark:text-white/70 text-end">{{ __('forms.MB') }}</span>
															</div>
														</div>
													</div>
												</div>
												<div class="box shadow-none mb-2 px-2 py-1 col-span-12 md:col-span-6 xxl:col-span-5">
													<div class="flex relative border-1">
														<div class="flex-1">
															<div class="flex justify-between items-center mb-1 text-sm">
																<span class="text-base font-semibold text-gray-800 dark:text-white">{{ $insurer->email }}</span>
															</div>
															<div class="flex justify-between items-center text-xs">
																<span class="text-gray-500 dark:text-white/70">{{ __('forms.Email') }}</span>
															</div>
														</div>
													</div>
												</div>
												<div class="box shadow-none mb-2 px-2 py-1 col-span-12 md:col-span-6 xxl:col-span-4">
													<div class="flex relative border-1">
														<div class="flex-1">
															<div class="flex justify-between items-center mb-1 text-sm">
																<span class="text-base font-semibold text-gray-800 dark:text-white">{{ $insurer->phone }}</span>
																<span class="text-base font-semibold text-gray-800 dark:text-white">{{ $insurer->mobile }}</span>
															</div>
															<div class="flex justify-between items-center text-xs">
																<span class="text-gray-500 dark:text-white/70">{{ __('forms.PhoneNumber') }}</span>
																<span class="text-gray-500 dark:text-white/70 text-end">{{ __('forms.PhoneNumber') }}</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="grid grid-cols-12 gap-x-2">
												<div class="box shadow-none mb-2 px-2 py-1 col-span-12 md:col-span-6 xxl:col-span-6">
													<div class="flex relative border-1">
														<div class="flex-1">
															<div class="flex justify-between items-center mb-1 text-sm">
																<span
																	class="text-base font-semibold text-gray-800 dark:text-white">{{ $insurer->lastActiveResidence->line_1 }}</span>
															</div>
															<div class="flex justify-between items-center text-xs">
																<span class="text-gray-500 dark:text-white/70">{{ __('forms.BusinessAddress') }}</span>
															</div>
														</div>
													</div>
												</div>
												<div class="box shadow-none mb-2 px-2 py-1 col-span-12 md:col-span-6 xxl:col-span-6">
													<div class="flex relative border-1">
														<div class="flex-1">
															<div class="flex justify-between items-center mb-1 text-sm">
																<span
																	class="text-base font-semibold text-gray-800 dark:text-white">{{ $insurer->lastActiveResidence->city->zip }}
																	{{ $insurer->lastActiveResidence->city->name }},
																	{{ $insurer->lastActiveResidence->city->country->name }}</span>
															</div>
															<div class="flex justify-between items-center text-xs">
																<span class="text-gray-500 dark:text-white/70">{{ __('forms.City') }}</span>
															</div>
														</div>
													</div>
												</div>
											</div>

										</div>
									</div>
								</div>
								<div class="grid grid-cols-12 gap-x-5">
									<div class="col-span-12">
										<div class="box">
											<div class="box-header">
												<div class="grid grid-cols-12 gap-6">
													<div class="col-span-12 lg:col-span-4">
														<div class="relative sm:max-w-xs max-w-[210px]">

														</div>
													</div>
													<div class="col-span-12 lg:sm:col-span-8">
														<div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-2 lg:justify-end team-right rtl:space-x-reverse">
															<a href="javascript:void(0);" class="ti-btn ti-btn-outline ti-btn-outline-secondary py-0 px-1 my-0 whitespace-nowrap">
																<i class="ti ti-circle-plus leading-none"> </i>{{ __('insurance.AddNewContact') }}
															</a>
														</div>
													</div>
												</div>
											</div>
											<div class="box-body">
												<div class="sm:grid sm:space-y-0 space-y-6 xl:!grid-cols-3 md:grid-cols-2 gap-6">
													@forelse ($insurer->contacts as $contact)
														<div class="box mb-0">
															<div class="box-body space-y-5">
																<div class="flex">
																	<div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-4 rtl:space-x-reverse">
																		<img class="avatar avatar-lg rounded-sm" src="{{ asset('build/assets/img/users/1.jpg') }}"
																			alt="Image Description">
																		<div class="space-y-1 my-auto">
																			<h5 class="font-semibold text-base leading-none">Julia Walker</h5>
																			<p
																				class="text-gray-500 dark:text-white/70 font-semibold text-xs truncate xxxl:max-w-[9rem] max-w-[8rem]">
																				juliawalker@gmail.com</p>
																			<p class="text-primary dark:text-primary text-xs font-semibold">+121 2525252352</p>
																		</div>
																	</div>
																	<div class="ltr:ml-auto rtl:mr-auto">
																		<a aria-label="anchor" href="javascript:void(0);"><i
																				class="ri ri-heart-fill text-base text-danger hover:text-danger"></i></a>
																	</div>
																</div>
															</div>
															<div class="box-footer">
																<div class="grid grid-cols-12 gap-x-3">
																	<div class="sm:col-span-2 col-span-4">
																		<a aria-label="anchor" href="javascript:void(0);"
																			class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
																			<i class="ri ri-phone-line text-lg leading-none"></i>
																		</a>
																	</div>
																	<div class="sm:col-span-8 col-span-4">
																		<a href="javascript:void(0);"
																			class="inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 w-full rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
																			<i class="ri-chat-2-line text-lg leading-none"></i> <span
																				class="text-sm leading-none hidden sm:block">Message</span>
																		</a>
																	</div>
																	<div class="sm:col-span-2 col-span-4">
																		<div class="hs-dropdown ti-dropdown flex justify-end">
																			<a aria-label="anchor" href="javascript:void(0);"
																				class="hs-dropdown-toggle ti-dropdown-toggle inline-flex !p-2 flex-shrink-0 justify-center items-center gap-2 rounded-sm border font-medium bg-white text-gray-500 shadow-sm align-middle focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-white focus:ring-primary transition-all text-xs dark:bg-bgdark dark:border-white/10 dark:text-white/70 dark:focus:ring-offset-white/10">
																				<i class="ri ri-more-2-line text-lg leading-none"></i>
																			</a>
																			<div class="hs-dropdown-menu ti-dropdown-menu">
																				<a class="ti-dropdown-item" href="javascript:void(0);"><i
																						class="ri-share-line me-2 align-middle"></i>Share</a>
																				<a class="ti-dropdown-item" href="javascript:void(0);"><i
																						class="ri-video-chat-line me-2 align-middle"></i>Video Call</a>
																				<a class="ti-dropdown-item" href="javascript:void(0);"><i
																						class="ri-delete-bin-5-line me-2 align-middle"></i>Delete</a>
																			</div>
																		</div>
																	</div>
																</div>
															</div>
														</div>
													@empty
														No contacts
													@endforelse
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- End::row-1 -->

		</div>
	</div>
@endsection