1<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
2<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
3<#assign facilityId ="" />
4<#if request.getParameter("facilityId")?has_content>
5 <#assign facilityId = request.getParameter("facilityId") />
6</#if>
7<div class="bookAppointmentFilterCol">
8 <div class="${namespace} customSelect">
9 <label class="d-block">${languageUtil.get(locale,"facilities")}</label>
10 <#if !customFacetDisplayContext.isNothingSelected()>
11 <@clay.button
12 cssClass="btn-unstyled c-mb-4 facet-clear-btn d-none"
13 displayType="link"
14 id="${namespace + 'facetCustomClear'}"
15 onClick="Liferay.Search.FacetUtil.clearSelections(event);"
16 >
17 <strong>${languageUtil.get(locale, "clear")}</strong>
18 </@clay.button>
19 </#if>
20 <@clay.button
21 cssClass="facet-term btn-unstyled ${(entry.isSelected())?then('facet-term-selected', 'facet-term-unselected')} term-name ${namespace}-btn d-none"
22 data\-term\-id="${entry.getBucketText()}"
23 disabled="true"
24 displayType="link"
25 onClick="Liferay.Search.FacetUtil.changeSelection(event);"
26 >
27 </@clay.button>
28
29 <#assign facilityList = (restClient.get("/c/facilitieses/scopes/${themeDisplay.getSiteGroupId()}?filter=taxonomyCategoryIds%2Fany%28t%3At%20ne%2085202%29&fields=id%2Cname&restrictFields=actions&pageSize=0").items)!{} />
30 <#if entries?has_content>
31 <select id="mySelect1-${namespace}" class="custom-select collapseCustomSelect modelCustomSelect d-none" onChange="handleSelectChange${namespace}(event)">
32 <option value="">${languageUtil.get(locale, "all")}</option>
33 <#list facilityList as entry>
34 <#if entry.name?has_content>
35 <option value="${entry.id}" ${(facilityId == entry.id?string)?then('selected','')}>
36 ${entry.name}
37 </option>
38 </#if>
39 </#list>
40
41 </select>
42 </#if>
43 </div>
44</div>
45
46<script>
47
48 function handleSelectChange${namespace}(event) {
49 const selectElement = event.target;
50 const options = selectElement.options;
51 for (let i = 0; i < options.length; i++) {
52 options[i].classList.remove("selected");
53 }
54
55 const selectedOption = selectElement.options[selectElement.selectedIndex];
56 selectedOption.classList.add("selected");
57
58 const selectedValue = selectedOption.value;
59 const termId = selectedOption.value;
60 const hiddenButton = document.querySelector('.${namespace} button[data-term-id]');
61 const hiddenButton2 = document.querySelector('.${namespace} .${namespace}-btn');
62 const clearButton = document.getElementById('${namespace + "facetCustomClear"}');
63
64 if (!selectedValue) {
65 clearButton.click();
66 } else {
67 if (hiddenButton2) {
68 hiddenButton2.setAttribute("data-term-id", termId);
69 hiddenButton2.click();
70 }
71 }
72 }
73
74 $('.collapseCustomSelect').select2({
75 width: 'resolve' // Allows the select to adjust to container width
76 });
77
78 // Fix Select2 dropdown positioning inside Bootstrap modal for max 991px
79 $('#bookAppointmentModal').on('shown.bs.modal', function () {
80 $('.modelCustomSelect').select2({
81 width: '100%', // Ensure the select dropdowns fill the width of their container
82 dropdownParent: $('#bookAppointmentModal'),
83 });
84 });
85
86 // Handle form reset for any form with a reset button
87 $('.resetBtn').on('click', function () {
88 var form = $(this).closest('form');
89
90 // Ensure modal is closed before resetting
91 $('#bookAppointmentModal').modal('hide');
92
93 // Delay form reset to ensure the modal has been fully hidden
94 setTimeout(function () {
95 // Reset the form
96 form[0].reset();
97
98 // Manually reset Select2 fields
99 form.find('.modelCustomSelect').val(null).trigger('change');
100 form.find('.collapseCustomSelect').val(null).trigger('change');
101 }, 300); // Small delay to ensure modal hides first
102 })
103</script>
104<style>
105 .select2-container--default {
106 display:block;
107 }
108 .select2-container .select2-selection--single {
109 border: 1px solid #1A4775;
110 height: 52px;
111 border-radius: 12px;
112 font-size: 16px;
113 display:block;
114 font-weight: 400;
115 }
116
117 span.select2-dropdown.select2-dropdown--below {
118 border: 1px solid #1A4775;
119 top: 2px;
120 border-radius: 12px;
121 }
122
123
124 .select2-container--default .select2-results>.select2-results__options .select2-results__option {
125 padding: 6px 14px;
126 }
127
128 .select2-container--default .select2-search--dropdown .select2-search__field {
129 border: 1px solid #1A4775;
130 border-radius: 6px;
131 }
132
133 .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
134 background-color: unset;
135 color: unset;
136 }
137 /* .select2-container--default .select2-results>.select2-results__options .select2-results__option:hover{
138 background-color: #e8f0fe;
139 color: #002F70;
140 font-family: "Dubai Medium";
141 } */
142 .select2-container--default .select2-results__option--selectable:hover {
143 background-color: #EBF7FF;
144 color: #002F70;
145 font-family: "Dubai Medium";
146 }
147 .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
148 border-bottom-left-radius: 12px;
149 border-bottom-right-radius: 12px;
150 }
151
152
153 .select2-container--default .select2-selection--single .select2-selection__rendered {
154 line-height: 28px;
155 color: #002F70;
156 font-size: 16px;
157 font-weight: 400;
158 font-family: "Dubai Regular";
159 }
160
161 .select2-container--default .select2-results__option--selectable.select2-results__option--selected{
162 background-color: unset;
163 color: #32AFFC;
164 font-family: "Dubai Bold";
165 }
166 .direction-rtl .bookAppointmentCollapse .bookAppointmentCollapseInner button.bookAppointmentFormBtn[data-target="#bookAppointmentModal"] span.material-symbols-outlined {
167 transition: all 0.4s ease;
168 transform: rotate(90deg);
169}
170
171.direction-rtl .select2-container .selection .select2-selection:after {
172 right: unset;
173 left: 18px;
174}
175.direction-rtl #bookAppointmentModal .modal-content .modal-header .close {
176 right: unset;
177 left: 5px;
178 border: 0;
179}
180</style>
