$("#direktori-filter-container").exists(function(){
    var $direktoriItems;
    var $direktoriGrid;

    $(document).ready(function() {
        $.ajax({
            url: 'site/direktori',
            dataType: 'json',
            success: function(direktoriData) {
                var direktoriJSON = direktoriData.RECORDS;
                $direktoriItems = [];

                for (var direktoriCounter = 0; direktoriCounter < direktoriJSON.length; direktoriCounter++) {
                    var namaSekretaris = direktoriJSON[direktoriCounter].nama_sekretaris;
                    var showSekretaris = namaSekretaris !== null && namaSekretaris.trim() !== ''; // Check if nama_sekretaris is not null and not an empty string

                    var fotoKetua =  direktoriJSON[direktoriCounter].img? direktoriJSON[direktoriCounter].img:'assets/img/user.png';
                    var fotoSekretaris =  direktoriJSON[direktoriCounter].img_sec?direktoriJSON[direktoriCounter].img_sec:'assets/img/user.png';

                    var direktoriItem = $('<div class="panel panel-default">\
                        <div class="panel-heading cursor-pointer" data-toggle="collapse" href="#collapse' + direktoriJSON[direktoriCounter].id + '">\
                            <h4 class="panel-title copy bold mb-0">' + direktoriJSON[direktoriCounter].nama + '</h4>\
                        </div>\
                        <div id="collapse' + direktoriJSON[direktoriCounter].id + '" class="panel-collapse collapse" data-parent="#direktori-filter-container">\
                            <div class="panel-body copy-m">\
                                <div class="row">\
                                    <div class="col-md-12">\
                                        <div class="img-wrapper row">\
                                            <div class="img-content col-sm-4">\
                                                <img src="' + fotoKetua + '" class="img-user" alt="">\
                                                <h3 class="copy-m bold">' + direktoriJSON[direktoriCounter].nama_ketua + '</h3>\
                                                <p class="copy-s uppercase italic">'+((direktoriJSON[direktoriCounter].is_active==2)?'CARETAKER':'KETUA')+'</p>\
                                            </div>\
                                            ' + (showSekretaris ? '\
                                            <div class="img-content col-sm-4">\
                                                <img src="' + fotoSekretaris + '" class="img-user" alt="">\
                                                <h3 class="copy-m bold">' + namaSekretaris + '</h3>\
                                                <p class="copy-s uppercase italic">SEKRETARIS </p>\
                                            </div>\
                                            ' : '') + '\
                                        </div>\
                                    </div>\
                                    <div class="col-md-12">\
                                        <div class="direktori-panel copy bold">Alamat</div>\
                                        <div class="direktori-panel copy-m"><span class="icon copy icon-location"></span>' + direktoriJSON[direktoriCounter].alamat + '</div>\
                                        <div class="direktori-panel copy-m"><span class="icon copy icon-envelope1"></span><a href="mailto:' + direktoriJSON[direktoriCounter].email + '">' + direktoriJSON[direktoriCounter].email + '</a></div>\
                                        <div class="direktori-panel copy-m"><span class="icon copy icon-phone"></span>' + direktoriJSON[direktoriCounter].telp + '</div>\
                                        <div class="direktori-panel copy-m"><span class="icon copy icon-location"></span>' + direktoriJSON[direktoriCounter].web + '</div>\
                                    </div>\
                                </div>\
                            </div>\
                        </div>\
                    </div>');

                    $direktoriItems.push(direktoriItem);
                }
                $direktoriGrid = $('#direktori-filter-container').append($direktoriItems);

                function sortDirektoriItemsAsc() {
                    $direktoriGrid.empty();

                    var sortedItems = $direktoriItems.sort(function (a, b) {
                        var textA = $(a).find('.panel-title').text().toUpperCase();
                        var textB = $(b).find('.panel-title').text().toUpperCase();

                        if (textA < textB) {
                            return -1;
                        }
                        if (textA > textB) {
                            return 1;
                        }
                        return 0;
                    });

                    $direktoriGrid.append(sortedItems);
                }

                function sortDirektoriItemsDesc() {
                    $direktoriGrid.empty();

                    var sortedItems = $direktoriItems.sort(function (a, b) {
                        var textA = $(a).find('.panel-title').text().toUpperCase();
                        var textB = $(b).find('.panel-title').text().toUpperCase();

                        if (textA > textB) {
                            return -1;
                        }
                        if (textA < textB) {
                            return 1;
                        }
                        return 0;
                    });

                    $direktoriGrid.append(sortedItems);
                }

                $('#direktoriSortResult').on('change', function () {
                    var selectedOption = $(this).val();
                    if (selectedOption === 'asc') {
                        sortDirektoriItemsAsc();
                    } else if (selectedOption === 'desc') {
                        sortDirektoriItemsDesc();
                    }
                });
            },
            error: function (direktoriData) {
                // Handle the error
            }
        });

        $.ajax({
            url: 'assets/docs/provinsi-list.json',
            dataType: 'json',
            success: function (provinsiData) {
                var provinsiJSON = provinsiData.RECORDS;
                var $provinsiItems = [];

                for (var provinsiCounter = 0; provinsiCounter < provinsiJSON.length; provinsiCounter++) {
                    var provinsiName = provinsiJSON[provinsiCounter].name;

                    if (provinsiName.indexOf("DKI Jakarta") !== -1) {
                        provinsiName = "Jakarta";
                    }

                    var provinsiItem = $('<option value="' + provinsiName + '">' + provinsiName + '</option>');
                    $provinsiItems.push(provinsiItem);
                }
                $('#direktoriSearchResult').append('<option value="default">Pilih provinsi</option>');
                $('#direktoriSearchResult').append($provinsiItems);
                
                function filterDirektoriItems(selectedProvinsi) {
                    if (selectedProvinsi === 'default') {
                        $direktoriGrid.empty().append($direktoriItems);
                    } else {
                        var filteredItems = [];
                        for (var i = 0; i < $direktoriItems.length; i++) {
                            var cityName = $($direktoriItems[i]).find('.panel-title').text();
                            if (cityName.toLowerCase().indexOf(selectedProvinsi.toLowerCase()) !== -1) {
                                filteredItems.push($direktoriItems[i]);
                            }
                        }

                        $direktoriGrid.empty().append(filteredItems);
                    }
                }

                $('#direktoriSearchResult').on('change', function () {
                    var selectedProvinsi = $(this).val();
                    filterDirektoriItems(selectedProvinsi);
                    console.log(selectedProvinsi);
                });
            },
            error: function (provinsiData) {
                // Handle the error
            }
        });
    });
});