@extends('backend.layouts.master')

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

	<style type="text/css">
		.branch-input {
			display: block;
			border-radius: .25rem;
			border-width: 1px;
			--tw-border-opacity: 1;
			border-color: rgb(226 232 240 / var(--tw-border-opacity));
			padding: .25rem .5rem;
			font-size: .75rem;
			line-height: .95rem;
		}

		.hs-accordion-toggle[aria-expanded="true"] .plus-icon {
			display: none;
		}

		.hs-accordion-toggle[aria-expanded="true"] .minus-icon {
			display: block;
		}

		.hs-accordion-toggle[aria-expanded="false"] .plus-icon {
			display: block;
		}

		.hs-accordion-toggle[aria-expanded="false"] .minus-icon {
			display: none;
		}
	</style>
@endsection

@section('content')
	<div class="content">
		<!-- Start::main-content -->
		<div class="main-content">
			<div class="grid grid-cols-12 gap-x-6 mt-6">
				<div class="col-span-12 xxl:col-span-12">
					<form action="#" method="POST">
						@csrf
						<div class="hs-accordion-group">
							@foreach ($insuranceTypes as $type)
								<div class="mb-2">
									@include('backend.insurance.insurance-types.partials.insurance_type_blank', ['type' => $type])
								</div>
							@endforeach
						</div>
						<button type="submit" class="mt-4 p-2 bg-blue-500 text-white rounded">Submit</button>
					</form>

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

@section('scripts')
	<script>
		document.addEventListener('DOMContentLoaded', function() {
			// Propagation behavior for inputs remains unchanged
			const inputs = document.querySelectorAll('.branch-input');
			inputs.forEach(input => {
				input.addEventListener('input', function(e) {
					const newValue = e.target.value;
					const containerSelector = e.target.getAttribute('data-children-container');
					if (containerSelector) {
						const container = document.querySelector(containerSelector);
						if (container) {
							const descendantInputs = container.querySelectorAll('.branch-input');
							descendantInputs.forEach(childInput => {
								childInput.value = newValue;
							});
						}
					}
				});
			});

			// Function to update all toggle buttons based on the actual rendered height
			function updateAllToggles() {
				document.querySelectorAll('.hs-accordion-toggle').forEach(function(btn) {
					const contentId = btn.getAttribute('aria-controls');
					const content = document.getElementById(contentId);
					if (content) {
						// Use getBoundingClientRect to get the current height
						const height = content.getBoundingClientRect().height;
						// If height is more than a minimal threshold, consider the content expanded.
						if (height > 1) {
							btn.setAttribute('aria-expanded', 'true');
						} else {
							btn.setAttribute('aria-expanded', 'false');
						}
					}
				});
			}

			// When any accordion toggle is clicked, wait a bit and then update all toggles.
			document.querySelectorAll('.hs-accordion-toggle').forEach(function(button) {
				button.addEventListener('click', function() {
					setTimeout(updateAllToggles,
						300); // Adjust delay as needed for your transition timing.
				});
			});
		});
	</script>
@endsection