@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">
		<div id="individual-dashboard" class="main-content">
			<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">
						Create Commission Defaults for {{ $insurer->short_name }}</h3>
				</div>
				<div>
					@if (session('status'))
						<script>
							document.addEventListener("DOMContentLoaded", function() {
								notifier.success("{{ session('status') }}");
							});
						</script>
					@endif
				</div>
			</div>

			<div class="grid grid-cols-12 gap-x-6">
				<div class="col-span-12 lg:col-span-2">
					<div class="box">
						<div class="box-body pt-6">
							@include('backend.insurance.insurers.components.sidebar')
						</div>
					</div>
				</div>

				<div class="col-span-12 lg:col-span-10">
					<div class="grid grid-cols-12 gap-x-5">
						<div class="col-span-12 lg:col-span-12">
							{{-- All necessary variables are passed from the controller --}}
							@include('backend.insurance.commission-defaults._form')
						</div>

					</div>
				</div>

			</div>
		</div>

	</div>
@endsection

@section('scripts')
	<script>
		// Your accordion and propagation JS remains unchanged.
		document.addEventListener('DOMContentLoaded', function() {
			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 updateAllToggles() {
				document.querySelectorAll('.hs-accordion-toggle').forEach(function(btn) {
					const contentId = btn.getAttribute('aria-controls');
					const content = document.getElementById(contentId);
					if (content) {
						const height = content.getBoundingClientRect().height;
						if (height > 1) {
							btn.setAttribute('aria-expanded', 'true');
						} else {
							btn.setAttribute('aria-expanded', 'false');
						}
					}
				});
			}
			document.querySelectorAll('.hs-accordion-toggle').forEach(function(button) {
				button.addEventListener('click', function() {
					setTimeout(updateAllToggles, 300);
				});
			});
		});
	</script>
@endsection