@extends('layouts/contentLayoutManagement')

@section('title', __('locale.Request'))

{{-- @section('content') --}}

@section('vendor-style')
<!-- vendor css files -->
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/wizard/bs-stepper.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
@endsection


@section('page-style')
<!-- Page css files -->
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-wizard.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">

@endsection

@section('content')
<section id="multiple-column-form">
	<div class="horizontal-wizard">
		<form class="form-add-request">
			@csrf
			<div class="col-12">
				<div class="card">
					<div class="card-header">
						<h4 class="card-title" id="operator_humanittare_value"></h4>
					</div>
					<div class="card-body">
							<div class="row">
								<input type="hidden" id="contract_id">
								<div class="col-md-6 col-12">
									<div class="mb-1">
										<label class="form-label" for="requests_type_id">Tipo de Solicitação</label>
										<select id="requests_type_id" class="select2" placeholder="Tipo Solicitação" name="requests_type_id" required>
											<option value="" selected disabled>Selecione uma opção</option>
											@if ($request_types)
												@foreach ($request_types as $request_type)
													<option value="{{ $request_type->id }}">{{ $request_type->type_request }}</option>
												@endforeach
											@endif
										</select>
									</div>
								</div>							
								<div class="col-md-6">
									<div class="form-group">
										<label for="company_id" class="form-label">Empresas</label>
										<select class="select2" name="company_id" id="company_id" required>
											<option value="" selected disabled>Selecione um beneficiário</option>
											@if ($companies)
											@foreach ($companies as $company)
											<option value="{{ $company->id }}">{{ $company->name }}</option>
											@endforeach
											@endif
										</select>
									</div>
								</div>
								<div class="col-md-12">
									<div class="form-group">
										<label for="product_id" class="form-label">Produto</label>
										<select class="select2" name="product_id" id="product_id" required>
											<option value="" selected disabled>Selecione um produto</option>
											
										</select>
									</div>
								</div>
								<div class="col-md-6">
									<label class="form-label" for="protocol_number_operator">Número de Protocolo</label>
									<input type="text" id="protocol_number_operator" class="form-control" name="protocol_number_operator" placeholder="Número de Protocolo" />
								</div>
								<div class="col-md-6">
									<label class="form-label" for="status">Status</label>
									<select id="status" class="select2" placeholder="Status" name="status" required>
										<option selected disabled>Selecione um Status</option>
										<option value="1">ATIVA</option>
										<option value="2">ENCERRADA</option>
										<option value="3">COM PENDENCIAS - SOLICITANTE</option>
										<option value="4">COM PENDENCIAS - OPERADORA</option>
									</select>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label for="employee_id" class="form-label">Responsável</label>
										<select class="select2" name="employee_id" id="employee_id" required>
											<option value="" selected disabled>Selecione Responsável</option>
											@if ($employees)
											@foreach ($employees as $employee)
											<option value="{{ $employee->id }}">{{ $employee->name }}</option>
											@endforeach
											@endif
										</select>
									</div>
								</div>
								<div class="col-md-6">
									<div class="form-group">
										<label for="request_incidences_id" class="form-label">Incidencias</label>
										<select class="select2" name="request_incidences_id" id="request_incidences_id" >
											<option value="" selected disabled>Selecione Responsável</option>
											@if ($request_incidences)
											@foreach ($request_incidences as $request_incidence)
											<option value="{{ $request_incidence->id }}">{{ $request_incidence->name }}</option>
											@endforeach
											@endif
										</select>
									</div>
								</div>
							</div>
						
					</div>
				</div>
			</div>

			<div class="col-12">
				<div class="card">
					<div class="card-header">
						<h4 class="card-title">Lista de Colaboradores</h4>
					</div>
					<div class="card-body">
						<div class="row">
							<div class="col-md-12">
								<div id="holder_select_title"></div>
								<div id="holder_select_all"></div>
								<div style="max-height: 300px; overflow-y: auto;">
									<table class="table table-striped" id="holder_select_table">
									</table>
								</div>
								<div class="col-md-12 mt-1" id="documentSection"></div>
							</div>
						</div>
					</div>
					<div class="card-footer">
						<div class="row mt-2">
							<div class="col-12">
								<button type="button" class="btn btn-primary me-1" id="btnAddRequests">{{ __('locale.Table.Contract.Column.AddButton') }}</button>
								<button type="reset" class="btn btn-outline-secondary" id="btnReset">{{ __('locale.Table.Contract.Column.BackButton') }}</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</section>



@endsection
@section('vendor-script')
<!-- vendor files -->
<script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/wizard/bs-stepper.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/jquery-mask/jquery.mask.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/extensions/ext-component-toastr.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/extensions/brdocs.cpfcnpjValidator.js')) }}"></script>
@endsection
@section('page-script')
<script>
	var request = null;


	$(function() {

		let documentsToSubmit = {};
		let holdersData = {};

		$('.select2').each(function() {
			var $this = $(this);
			$this.wrap('<div class="position-relative"></div>');
			$this.select2({
				dropdownAutoWidth: true,
				width: '100%',
				dropdownParent: $this.parent()
			});
		});

		$("#requests_type_id").on("change", function() {

			let requests_type_id = $(this).val();

			axios.get(`{{ route('api.suppliers.slas.slaBySupplier', '') }}/${requests_type_id}`, {
					headers: {
						"Authorization": "Bearer {{ session('Authorization') }}"
					}
				})
				.then(function(response) {

					$('#product_id').empty();
					$('input, select, textarea').not('#requests_type_id').prop('disabled', false);
					
					var type_request = response.data[0];
					
					var operator_humanittare_value = $('#operator_humanittare_value');

					operator_humanittare_value.html(`<p>Prazo para resposta: ${type_request.humanittare+type_request.business_operator} dias</p>`);
				})
				.catch(function(error) {
					console.error('Erro na requisição:', error);
					$('#operator_humanittare_value').empty();
					$('#operator_humanittare_value').html(`<p>Sla não cadastrado.</p>`);
					$('input, select, textarea').not('#requests_type_id').prop('disabled', true);
					$('input, select, textarea').not('#requests_type_id').val('');
					$('#company_id, #contract_id, #product_id, #status, #employee_id, #').val(null).trigger('change');
				});
			


		});

		$("#company_id").on("change", function() {

			let company_id = $(this).val();
			getCompaniesByHolders(company_id);
			getCompaniesByProduct(company_id);

		});

		$('#requests_type_id').on('change', function() {
			let typeRequestId = $(this).val();
			
			axios.get(`{{ route('api.suppliers.documents.find', '') }}/${typeRequestId}`, {
				headers: {
					"Authorization": "Bearer {{ session('Authorization') }}"
				}
			})
			.then(function(response) {

				$('#documentSection').empty();
				$('input[type="checkbox"]').prop('checked', false);
				
				let holders = $('#holders').val();
				let holderNames = [];

				holders.forEach(function(holder) {
					let holderText = $('#holders option[value="' + holder + '"]').text();
					holderNames.push({ id: holder, name: holderText });
				});
				
				holderNames.forEach(function(holderName) {
					
					var accordionExample = $('<div>').addClass('accordion').attr('id', 'accordionExample');
					var accordionItem = $('<div>').addClass('accordion-item');
					var accordionHeader = $('<h2>').addClass('accordion-header').attr('id', 'heading' + holderName.id);
					var accordionButton = $('<button>').addClass('accordion-button d-block').attr({
						type: 'button',
						'data-bs-toggle': 'collapse',
						'data-bs-target': '#collapse' + holderName.id,
						'aria-expanded': 'true',
						'aria-controls': 'collapse' + holderName.id
					}).text(holderName.name);
					var accordionCollapse = $('<div>').addClass('accordion-collapse collapse').attr({
						id: 'collapse' + holderName.id,
						'aria-labelledby': 'heading' + holderName.id,
						'data-bs-parent': '#accordionExample'
					});
					var accordionBody = $('<div>').addClass('accordion-body');

					accordionCollapse.append(accordionBody);
					accordionHeader.append(accordionButton);
					accordionItem.append(accordionHeader).append(accordionCollapse);

					accordionExample.append(accordionItem);


					if (response.data.length > 0) {
						response.data.forEach(function(document) {
							
							var container = $('<div>').addClass('document-container mb-1');

							var label = $('<label>').text(document.filename).attr('for', 'doc_' + document.id);
							var input = $('<input>').attr({
								type: 'file',
								id: 'doc_' + document.id,
								name: 'documents[' + document.id + ']'
							});

							container.append(label).append('<br>').append(input);
							accordionBody.append(container);
							
						});
						$('#documentSection').append(accordionExample);
					}
					else {
						var noDocumentParagraph = $('<p>').text('Nenhum documento encontrado.');
						$('#documentSection').append(noDocumentParagraph);
					}
				});
			})
			.catch(function(error) {
				console.error('Erro ao obter documentos:', error);
			});
		});

		$('#btnAddRequests').on("click", async function(eve) {

			eve.preventDefault();

			$(".form-add-request").submit();

		});	

		$(".form-add-request").on("submit", async function(event) {
			event.preventDefault();

			if ($(this).get(0).reportValidity()) {
				try {
					
					// Criando FormData com os dados do formulário
					let payload = new FormData($(this).get(0));

					let contractId = $('#contract_id').val();

					payload.append('contract_id', contractId);

					// Adicionando IDs dos colaboradores selecionados
					let selectedHolders = getSelectedHolders();

					// selectedHolders.forEach(holderId => {
					// 	payload.append('holders[]', holderId);
					// });

					selectedHolders.forEach(holder => {
						payload.append('holders[]', JSON.stringify(holder));
					});

					// Melhorando a exibição do FormData no console
					for (let [key, value] of payload.entries()) {
						if (value instanceof File) {
							console.log(`${key}: ${value.name} (File)`);
						} else if (typeof value === 'string' && value.startsWith('{') && value.endsWith('}')) {
							try {
								let obj = JSON.parse(value);
								console.log(`${key}:`, obj);
							} catch (e) {
								console.log(`${key}: ${value}`);
							}
						} else {
							console.log(`${key}: ${value}`);
						}
					}

					
					let response = await axios({
						url: `{{ route('api.requests.store') }}`,
						method: 'post',
						data: payload,
						headers: {
							"Authorization": "Bearer {{ session('Authorization') }}",
							"Content-Type": "multipart/form-data"
						}
					});

					// Manipulando a resposta da API
					let json = response.data;
					Swal.fire({
						title: 'Uhuul!',
						text: "{{ __('locale.Table.Contract.Column.AddSuccess') }}",
						icon: "success"
					}).then((result) => {
						if (result.isConfirmed) {
							window.location.href = "{{ route('management.dashboard.requests.index') }}";
						}
					});

				} catch (error) {
					console.error('Erro na requisição:', error);

					// Tratamento de erros específicos
					let response = error.response;
					if (response) {
						if (response.status === 400 || response.status === 422) {
							Swal.fire({
								title: 'Ops!',
								text: response.data.message,
								icon: 'error',
								cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
							});
						} else if (response.status === 404) {
							Swal.fire({
								title: 'Ops!',
								text: '{{ __("locale.Table.suppliers.Column.RequestedNotFound") }}',
								icon: 'error',
								cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
							});
						} else {
							Swal.fire({
								title: 'Ops!',
								text: '{{ __("locale.Table.suppliers.Column.RegisterError") }}',
								icon: 'error',
								cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
							});
						}
					} else {
						Swal.fire({
							title: 'Ops!',
							text: 'Erro desconhecido',
							icon: 'error',
							cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
						});
					}
				}
			}
		});

		$(".form-add-request-iteration").on("submit", async function(eve) {

			eve.preventDefault();

			if (this.checkValidity()) {

				let json = Object.fromEntries((new FormData(this)).entries());


				try {

					let {
						data: response
					} = await axios({
							url: `{{ route('api.request-iterations.store') }}`,
							method: 'post',
							data: json,
							headers: {
								"Authorization": "Bearer {{ session('Authorization') }}"
							}
						})
						.catch((e) => {

							let response = e.response;

							@if(env('APP_DEBUG'))
							console.warn(e)
							@endif

							if (response.status === 400 || response.status === 422) {
								Swal.fire({
									title: 'Ops!',
									text: response.data.message,
									icon: 'error',
									cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
								})
							} else if (response.status === 404) {
								Swal.fire({
									title: 'Ops!',
									text: '{{ __("locale.Table.suppliers.Column.RequestedNotFound") }}',
									icon: 'error',
									cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
								})
							} else {

								Swal.fire({
									title: 'Ops!',
									text: '{{ __("locale.Table.suppliers.Column.RegisterError") }}',
									icon: 'error',
									cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
								})

							}

							return false;

						});

					Swal.fire({
						title: 'Uhuul!',
						text: '{{ __("locale.Table.suppliers.Column.AddSuccess") }}',
						icon: 'success',
					}).then((_) => {
						if (_.isConfirmed) {
							window.location.href =
								"{{ route('management.dashboard.requests.index') }}"
						}
					})


				} catch (e) {

				}
			}

		});

		$('#btnReset').on('click', function() {
			window.location.href = "{{ route('management.dashboard.requests.index') }}";
		});

		function getCompaniesByContract(company_id) {

			axios.get(`{{ route('api.contracts.getCompaniesByContract', '') }}/${company_id}`, {
					headers: {
						"Authorization": "Bearer {{ session('Authorization') }}"
					}
				})
				.then(function(response) {

					$('#contract').empty();
					var contracts = response.data;

					$('#contract_id').select2({
						multiple: false,
						data: contracts.map(function(contract) {
							return {
								id: contract.contract_id,
								text: 'Contrato #'+contract.contract_id
							};
						})
					});

				})
				.catch(function(error) {
					console.error('Erro na requisição:', error);
				});
		}

		function getCompaniesByProduct(company_id) {

			axios.get(`{{ route('api.contracts.getCompaniesByProduct', '') }}/${company_id}`, {
					headers: {
						"Authorization": "Bearer {{ session('Authorization') }}"
					}
				})
				.then(function(response) {

					//console.log(response.data);

					$('#product_id').empty();
					var products = response.data;
		
					$('#product_id').append($('<option>', {
						value: '',
						text: 'Selecione um produto'
					}));

					// Inicializa o select2 com opção de múltipla seleção
					$('#product_id').select2({
						multiple: false,
						data: products.map(function(product) {
							return {
								id: product.product_id,
								text: product.supplier_name + ' - ' + product.product_type_name + ' - ' + product.product_name + ' - ' + product.policy_number,
								contract_id: product.id,
							};
						})
					});

					$('#product_id').on('change', function() {
						// Obtenha o produto selecionado
						var selectedProduct = $(this).select2('data')[0];

						// Defina o valor do campo oculto com o contract_id do produto selecionado
						if (selectedProduct) {
							$('#contract_id').val(selectedProduct.contract_id);
						}
					});

				})
				.catch(function(error) {
					console.error('Erro na requisição:', error);
				});
		}

		async function getCompaniesByHolders(company_id) {
			try {
				let response = await axios({
					url: `{{ route('api.holders.company', '') }}/${company_id}`,
					method: 'get',
					headers: {
						"Authorization": "Bearer {{ session('Authorization') }}"
					}
				});

				let holdersData = response.data;
				let holders = response.data;

				let uniqueRoles = [...new Set(holdersData.map(item => item.role))];

				let $holderSelectTable = $('#holder_select_table');
				let $holderSelectAll = $('#holder_select_all');
				let $holderSelectTitle = $('#holder_select_title');
				let $holderSelect = $('#holder_select');

				$holderSelect.empty();
				$holderSelectTitle.empty();
				$holderSelectTable.find('tbody').remove();
				$holderSelectAll.empty();

				if (holders && holders.length > 0) {

					$holderSelectAll.addClass('mb-1');
					$holderSelectAll.append(`
						<div class="row">
							<div class="col-md-4">
								<div class="form-check">
									<input class="form-check-input" id="selectAll" name="selectAll" type="checkbox" value="">
									<label class="form-check-label" for="selectAll">
										Selecionar todos
									</label>
								</div>
							</div>
							<div class="col-md-4">
								<input class="form-control" type="text" id="filter-name" placeholder="Search" oninput="filterTable()">
							</div>
							<div class="col-md-4">
								<select class="form-control" id="filter-role" onchange="filterTable()">
									<option value="" selected>Selecione </option>
								</select>
							</div>
						</div>
					`);

					// const roleSelect = document.getElementById('filter-role');

					// uniqueRoles.forEach(role => {
					// 	const option = document.createElement('option');
					// 	option.value = role;
					// 	option.textContent = role;
					// 	roleSelect.appendChild(option);
					// });

					const combinedSelect = document.getElementById('filter-role');

					// Adiciona opções agrupadas por Cargo e Centro de Custo
					const roleOptgroup = document.createElement('optgroup');
					roleOptgroup.label = "Cargos";

					uniqueRoles.forEach(role => {
						const option = document.createElement('option');
						option.value = role;
						option.textContent = role;
						roleOptgroup.appendChild(option);
					});

					combinedSelect.appendChild(roleOptgroup);

					

					console.log(holdersData);
					// Adicionar evento de filtragem
					document.getElementById('filter-name').addEventListener('input', filterTable);
					document.getElementById('filter-role').addEventListener('change', filterTable);

					$holderSelectTable.append(`
						<thead style="position: sticky; top: 0; z-index: 1;">
							<tr>
								<th scope="col">#</th>
								<th scope="col">Nome</th>
								<th scope="col">Cargo</th>
								<th scope="col">Centro de custo</th>
							</tr>
						</thead>
						<tbody id="table_body">
						</tbody>
					`);

					let $tableBody = $('#table_body');

					holders.forEach(holder => {
						$tableBody.append(`
							<tr>
								<td><input class="form-check-input checkbox-option" id="${holder.id}" name="option${holder.id}" type="checkbox" value="${holder.id}"></td>
								<td><label class="form-check-label ms-3 me-6" for="${holder.id}">${holder.name}</label></td>
								<td>${holder.role}</td>
								<td>${holder.cost_center}</td>
							</tr>
						`);
					});

					$('#selectAll').on('change', function() {
						let isChecked = $(this).prop('checked');
						$('.checkbox-option').prop('checked', isChecked);
						updateSelectedHolders();
					});

					$('.checkbox-option').on('change', function() {
						updateSelectedHolders();
					});
				} else {
					$holderSelectTable.find('tbody').append('<p>Colaborador não encontrado</p>');
				}
			} catch (error) {
				console.log('Erro ao carregar os colaboradores:', error);
				$('#holder_select_table').find('tbody').append('<p>Colaborador não encontrado</p>');
			}
		}

		function updateSelectedHolders() {
			let selectedHolders = getSelectedHolders();
			let $selectedHoldersDiv = $('#documentSection');
			$selectedHoldersDiv.empty();

			selectedHolders.forEach(holder => {
				let $makeAccordion = makeAccordion(holder);
				$selectedHoldersDiv.append($makeAccordion);
			});
		}

		function getSelectedHolders() {
			let selectedHolders = [];
			$('.checkbox-option:checked').each(function() {
				selectedHolders.push({
					id: $(this).val(),
					name: $(this).closest('tr').find('label[for="' + $(this).attr('id') + '"]').text()
				});
			});
			//console.log(selectedHolders);
			return selectedHolders;
		}

		function makeAccordion(holder) {
			var accordionExample = $('<div>').addClass('accordion border').attr('id', 'accordionExample');
			var accordionItem = $('<div>').addClass('accordion-item');
			var accordionHeader = $('<h2>').addClass('accordion-header ').attr('id', 'heading' + holder.id);
			var accordionButton = $('<button>').addClass('accordion-button').attr({
				type: 'button',
				'data-bs-toggle': 'collapse',
				'data-bs-target': '#collapse' + holder.id,
				'aria-expanded': 'true',
				'aria-controls': 'collapse' + holder.id
			}).text(holder.name);
			var accordionCollapse = $('<div>').addClass('accordion-collapse collapse').attr({
				id: 'collapse' + holder.id,
				'aria-labelledby': 'heading' + holder.id,
				'data-bs-parent': '#accordionExample'
			});
			var accordionBody = $('<div>').addClass('accordion-body');

			accordionCollapse.append(accordionBody);
			accordionHeader.append(accordionButton);
			accordionItem.append(accordionHeader).append(accordionCollapse);

			accordionExample.append(accordionItem);
			
			
			getListDocuments(holder.id, accordionBody);

			return accordionExample;
		}

		function getListDocuments(holderId, accordionBody) {
			typeRequestId = $('#requests_type_id').val();
			axios.get(`{{ route('api.suppliers.documents.find', '') }}/${typeRequestId}`, {
				headers: {
					"Authorization": "Bearer {{ session('Authorization') }}"
				}
			})
			.then(function(response) {
				//console.log(response.data);
				if (response.data.length > 0) {
					var row = $('<div>').addClass('row');

					response.data.forEach(function(document) {
						var col = $('<div>').addClass('col-md-6');
						var container = $('<div>').addClass('document-container mb-1');
						
						var labelDocument = $('<label>').text(document.filename).attr('for', 'doc_' + document.id);
						var inputDocument = $('<input>').attr({
							type: 'file',
							id: 'doc_'+ holderId + '_' + document.id,
							name: `documents[${holderId}][${document.id}]`
						});

						documentsToSubmit[holderId] = documentsToSubmit[holderId] || [];
						documentsToSubmit[holderId].push(inputDocument);

						container.append(labelDocument).append('<br>').append(inputDocument);
						col.append(container);
						row.append(col);
					});

					accordionBody.append(row);

					var containerProtocol = $('<div>').addClass('text-input-container mt-1');
					var labelProtocol = $('<label>').text('Protocolo Operadora').attr('for', 'text_' + holderId);
					var inputProtocol = $('<input>').attr({
						type: 'text',
						id: 'text_' + holderId,
						name: `protocol_operator[${holderId}]`,
						class: 'form-control'
					});
					containerProtocol.append(labelProtocol).append('<br>').append(inputProtocol);
            		accordionBody.append(containerProtocol);
				}
			})
			.catch(function(error) {
				console.error('Erro ao obter documentos:', error);
			});
		}

		// function filterTable() {
		// 	let filterValue = document.getElementById('filter-name').value.toLowerCase();
		// 	let table = document.getElementById('holder_select_table');
		// 	let trs = table.querySelectorAll('tbody tr');

		// 	trs.forEach(function(tr) {
		// 		let tdName = tr.cells[1].textContent.toLowerCase();
		// 		let tdRole = tr.cells[2].textContent.toLowerCase();
		// 		let tdCostCenter = tr.cells[3].textContent.toLowerCase();
				
		// 		if (tdName.includes(filterValue) || tdRole.includes(filterValue) || tdCostCenter.includes(filterValue)) {
		// 			tr.style.display = '';
		// 		} else {
		// 			tr.style.display = 'none';
		// 		}
		// 	});
		// }
		function filterTable() {
			const filterValue = document.getElementById('filter-name').value.toLowerCase();
			const filterRole = document.getElementById('filter-role').value;
			const table = document.getElementById('holder_select_table');
			const trs = table.querySelectorAll('tbody tr');

			trs.forEach(tr => {
				const tdName = tr.cells[1].textContent.toLowerCase();
				const tdRole = tr.cells[2].textContent;
				const tdCostCenter = tr.cells[3].textContent.toLowerCase();
				
				const matchesTextFilter = tdName.includes(filterValue) || tdRole.toLowerCase().includes(filterValue) || tdCostCenter.includes(filterValue);
				const matchesRoleFilter = !filterRole || tdRole === filterRole;
				
				if (matchesTextFilter && matchesRoleFilter) {
					tr.style.display = '';
				} else {
					tr.style.display = 'none';
				}
			});
		}



	});
</script>
@endsection