https://johorexpo.com/js/main.js?1791326419

1// Mendefinisikan fungsi pengganti alert
2function customAlert(message) {
3    let alertOptions = {
4        title: 'Success',
5        html: message,
6        icon: 'success',
7        confirmButtonText: 'OK'
8    };
9
10    // Menambahkan logika untuk memeriksa isi pesan secara dinamis
11    let lowercaseMessage = message.toLowerCase();
12    if (lowercaseMessage.includes('error')) {
13        alertOptions.title = 'Error';
14        alertOptions.icon = 'error';
15    } else if (lowercaseMessage.includes('warning')) {
16        alertOptions.title = 'Warning';
17        alertOptions.icon = 'warning';
18    }
19
20    Swal.fire(alertOptions);
21}
22
23// Menggantikan fungsi alert bawaan dengan customAlert
24window.alert = customAlert;
25
26(function ($) {
27    "use strict";
28
29    // Spinner
30    var spinner = function () {
31        setTimeout(function () {
32            if ($('#spinner').length > 0) {
33                $('#spinner').removeClass('show');
34            }
35        }, 1);
36    };
37    spinner(0);
38
39
40    // Fixed Navbar
41    $(window).scroll(function () {
42        if ($(window).width() < 992) {
43            if ($(this).scrollTop() > 55) {
44                $('.fixed-top').addClass('shadow');
45            } else {
46                $('.fixed-top').removeClass('shadow');
47            }
48        } else {
49            if ($(this).scrollTop() > 55) {
50                $('.fixed-top').addClass('shadow').css('top', -55);
51            } else {
52                $('.fixed-top').removeClass('shadow').css('top', 0);
53            }
54        } 
55    });
56    
57    
58   // Back to top button
59   $(window).scroll(function () {
60    if ($(this).scrollTop() > 300) {
61        $('.back-to-top').fadeIn('slow');
62    } else {
63        $('.back-to-top').fadeOut('slow');
64    }
65    });
66    $('.back-to-top').click(function () {
67        $('html, body').animate({scrollTop: 0}, 1500, 'easeInOutExpo');
68        return false;
69    });
70
71
72    // Testimonial carousel
73    $(".testimonial-carousel").owlCarousel({
74        autoplay: true,
75        smartSpeed: 2000,
76        center: false,
77        dots: true,
78        loop: true,
79        margin: 25,
80        nav : true,
81        navText : [
82            '<i class="bi bi-arrow-right"></i>',
83            '<i class="bi bi-arrow-left"></i>'
84        ],
85        responsiveClass: true,
86        responsive: {
87            0:{
88                items:1
89            },
90            576:{
91                items:1
92            },
93            768:{
94                items:1
95            },
96            992:{
97                items:2
98            },
99            1200:{
100                items:2
101            }
102        }
103    });
104
105
106    // vegetable carousel
107    $(".vegetable-carousel").owlCarousel({
108        autoplay: true,
109        smartSpeed: 1500,
110        center: false,
111        dots: true,
112        loop: true,
113        margin: 25,
114        nav : true,
115        navText : [
116            '<i class="bi bi-arrow-left"></i>',
117            '<i class="bi bi-arrow-right"></i>'
118        ],
119        responsiveClass: true,
120        responsive: {
121            0:{
122                items:1
123            },
124            576:{
125                items:1
126            },
127            768:{
128                items:2
129            },
130            992:{
131                items:3
132            },
133            1200:{
134                items:4
135            }
136        }
137    });
138
139
140    // Modal Video
141    $(document).ready(function () {
142        var $videoSrc;
143        $('.btn-play').click(function () {
144            $videoSrc = $(this).data("src");
145        });
146        console.log($videoSrc);
147
148        $('#videoModal').on('shown.bs.modal', function (e) {
149            $("#video").attr('src', $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0");
150        })
151
152        $('#videoModal').on('hide.bs.modal', function (e) {
153            $("#video").attr('src', $videoSrc);
154        })
155    });
156
157
158
159    // Product Quantity
160    $('.quantity button').on('click', function () {
161        var button = $(this);
162        var oldValue = button.parent().parent().find('input').val();
163        if (button.hasClass('btn-plus')) {
164            var newVal = parseFloat(oldValue) + 1;
165        } else {
166            if (oldValue > 0) {
167                var newVal = parseFloat(oldValue) - 1;
168            } else {
169                newVal = 0;
170            }
171        }
172        button.parent().parent().find('input').val(newVal);
173    });

174
175document.addEventListener("DOMContentLoaded", function() {
176    const parallax = document.getElementById("parallax");
177    if (parallax) {
178        window.addEventListener("scroll", function () {
179            let offset = window.pageYOffset;
180            parallax.style.backgroundPositionY = offset * 0.7 + "px";
181        });
182    }
183});
184})(jQuery);
185
186
187document.addEventListener("DOMContentLoaded", function() {
188    var toggleBtn = document.getElementById("navbarToggle");
189    var closeBtn = document.getElementById("navCloseBtn");
190    var offCanvas = document.getElementById("navbarSupportedContent");
191
192    function toggleMenu(open) {
193        if (!offCanvas) return;
194        var show = open !== undefined ? open : !offCanvas.classList.contains("show");
195        offCanvas.classList.toggle("show", show);
196        if (toggleBtn) toggleBtn.classList.toggle("open", show);
197        document.body.style.overflow = show ? "hidden" : "";
198        var overlay = document.querySelector(".offcanvas-overlay");
199        if (overlay) overlay.classList.toggle("active", show);
200    }
201
202    // Create overlay once
203    var overlay = document.createElement("div");
204    overlay.className = "offcanvas-overlay";
205    document.body.appendChild(overlay);
206    overlay.addEventListener("click", function () { toggleMenu(false); });
207
208    // Toggle button
209    if (toggleBtn && offCanvas) {
210        toggleBtn.addEventListener("click", function (e) {
211            e.stopPropagation();
212            toggleMenu();
213        });
214    }
215
216    // Close button
217    if (closeBtn) {
218        closeBtn.addEventListener("click", function () { toggleMenu(false); });
219    }
220
221    // Close on nav-link click (mobile only, skip dropdown toggles)
222    if (offCanvas) {
223        offCanvas.querySelectorAll(".nav-link:not(.dropdown-toggle)").forEach(function (link) {
224            link.addEventListener("click", function () {
225                if (window.innerWidth < 992) toggleMenu(false);
226            });
227        });
228    }
229
230    // Close on Escape key
231    document.addEventListener("keydown", function (e) {
232        if (e.key === "Escape" && offCanvas && offCanvas.classList.contains("show")) {
233            toggleMenu(false);
234        }
235    });
236
237    // Accordion dropdowns on mobile
238    function initMobileAccordion() {
239        var isMobile = window.innerWidth < 992;
240        var toggles = offCanvas ? offCanvas.querySelectorAll(".dropdown-toggle") : [];
241        toggles.forEach(function (t) {
242            t.removeEventListener("click", accordionHandler);
243            if (isMobile) {
244                t.addEventListener("click", accordionHandler);
245            }
246        });
247    }
248
249    function accordionHandler(e) {
250        e.preventDefault();
251        e.stopImmediatePropagation();
252        var menu = this.nextElementSibling;
253        if (menu && menu.classList.contains("dropdown-menu")) {
254            var expanded = !menu.classList.contains("show");
255            menu.classList.toggle("show", expanded);
256            this.classList.toggle("open", expanded);
257            this.setAttribute("aria-expanded", expanded);
258        }
259    }
260
261    initMobileAccordion();
262    var rTimer;
263    window.addEventListener("resize", function () {
264        clearTimeout(rTimer);
265        rTimer = setTimeout(initMobileAccordion, 250);
266    });
267});
268
269jQuery(function($){
270    $('.contact_us').contact({
271        'country':'malaysia'
272    });
273});
274$(document).ready(function () {
275    $('.econtent').val($('.formm').html());
276
277        $('input').change(function() {
278            $(this).attr('value', $(this).val());
279            $('.econtent').val($('.formm').html());
280        });
281
282        $('textarea').change(function() {
283            $(this).html($(this).val());
284            $('.econtent').val($('.formm').html());
285        });
286        
287        $('input[type="checkbox"], input[type="radio"]').change(function() {
288            if ($(this).is(':checked')) {
289                $(this).attr('checked', 'checked');
290            } else {
291                $(this).removeAttr('checked');
292            }
293            $('.econtent').val($('.formm').html());
294            $(this).parent().find('input[type="radio"]').attr('name', $(this).parent().text());
295        });
296
297    function showBookingMessage(message, type) {
298        var $box = $('#bookingMessage');
299        if ($box.length === 0) return;
300        $box.stop().hide().empty();
301        
302        var bgColor = '#fef2f2';
303        var borderClr = '#fecaca';
304        var txtColor = '#b91c1c';
305        var iconColor = '#dc2626';

306        var iconSvg = '<svg style="width: 20px; height: 20px; color: ' + iconColor + ';" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>';
307        
308        if (type === 'success') {
309            bgColor = '#ecfdf5';
310            borderClr = '#a7f3d0';
311            txtColor = '#047857';
312            iconColor = '#059669';
313            iconSvg = '<svg style="width: 20px; height: 20px; color: ' + iconColor + ';" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>';
314        } else if (type === 'loading') {
315            bgColor = '#e0f2fe';
316            borderClr = '#bae6fd';
317            txtColor = '#0369a1';
318            iconColor = '#0284c7';
319            iconSvg = '<svg style="animation: spin 1s linear infinite; width: 20px; height: 20px; color: ' + iconColor + ';" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path style="opacity: 0.75;" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>';
320        }
321        
322        var html = '<div style="padding: 15px; border-radius: 8px; background-color: ' + bgColor + '; border: 1px solid ' + borderClr + '; color: ' + txtColor + '; font-family: sans-serif; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">' +
323                   iconSvg +
324                   '<span style="font-weight: 600;">' + message + '</span>' +
325                   '</div>' +
326                   '<style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>';
327                   
328        $box.html(html).fadeIn();
329    }
330
331$('#submitBooking').click(function(){
332
333    var obj = $(this);
334
335    $('.formm input[type="text"]').css('border-color', '#ddd #f1f1f1 #f1f1f1 #ddd').removeClass('errorfill');
336    $('input[name="I Would Like To"]').parent().css('border', 'none').removeClass('errorfill-chk');
337    $('input[name="Where Info"]').parent().css('border', 'none').removeClass('errorfill-chk');
338
339    var hasError = false;
340    var errorFields = [];
341
342    $('.formm input[type="text"]').each(function () {
343        var trimmedValue = $(this).val().trim();
344        if (!trimmedValue && !$(this).hasClass('notImportant')) {
345            $(this).css('border-color', '#ea6666');
346            $(this).addClass('errorfill');
347            hasError = true;
348            var fieldName = $(this).attr('placeholder') || 'Required text fields';
349            if (errorFields.indexOf(fieldName) === -1) {
350                errorFields.push(fieldName);
351            }
352        }
353    });
354
355    var preferences = [];
356    $('input[name="I Would Like To"]:checked').each(function () {
357        preferences.push($(this).val());
358    });
359
360    if (preferences.length === 0) {
361        $('input[name="I Would Like To"]').parent().css({
362            'border': '1px solid #ea6666',
363            'padding': '10px',
364            'border-radius': '5px'
365        }).addClass('errorfill-chk');
366        hasError = true;
367        errorFields.push('"I Would Like To" checkbox selection');
368    }
369
370    var whereInfo = [];
371    $('input[name="Where Info"]:checked').each(function () {
372        whereInfo.push($(this).val());
373    });
374
375    if (whereInfo.length === 0) {
376        $('input[name="Where Info"]').parent().css({
377            'border': '1px solid #ea6666',
378            'padding': '10px',
379            'border-radius': '5px'
380        }).addClass('errorfill-chk');
381        hasError = true;
382        errorFields.push('"Where did you hear about our expo?" checkbox selection');
383    }
384
385    if (hasError) {
386        showBookingMessage('Please complete all required fields: ' + errorFields.join(', '), 'error');
387        return false;
388    }
389
390    showBookingMessage('Sending your booking data...', 'loading');
391    obj.attr('disabled', 'disabled');
392
393    var contentFull = $('.econtent').val();
394    $.ajax({

395        type: 'POST',
396        url: 'action.php',
397        data: {
398            'ref': 'book-stand',
399            'content': contentFull,
400            'param[name]': $('#name').val(),
401            'param[company]': $('#company').val(),
402            'param[phone]': $('#phone').val(),
403            'param[email]': $('#email').val(),
404            'param[refferal_code]': $('#refferal_code').val(),
405            'param[preferences]': preferences.join(', '),
406            'param[where_info]': whereInfo.join(', ')
407        },
408        error: function (XMLHttpRequest, textStatus, errorThrown) {
409            showBookingMessage('Error sending data. Please try again.', 'error');
410            obj.removeAttr('disabled');
411        },
412        success: function (result) {
413            showBookingMessage('Your Data Has Been Successfully Submitted', 'success');
414            obj.removeAttr('disabled');
415
416            // Mengosongkan semua input
417            $('input[type="text"]').val('');
418
419            // Meng-unselect semua checkbox
420            $('input[type="checkbox"]').prop('checked', false).removeAttr('checked');
421
422            // Meng-unselect semua radio button
423            $('input[type="radio"]').prop('checked', false).removeAttr('checked');
424            
425            // Sync content value again
426            $('.econtent').val($('.formm').html());
427        }
428    });
429});
430
431});
432
433