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