function getParames(url, paramName) {
	let returnValue;
	let urlData = url;
	let parameters = (urlData.slice(urlData.indexOf('?') + 1, urlData.length)).split('&');

	for (let i = 0; i < parameters.length; i++) {
		let varName = parameters[i].split('=')[0];
		if (varName.toUpperCase() == paramName.toUpperCase()) {
			returnValue = parameters[i].split('=')[1];
			return decodeURIComponent(returnValue);
		}
	}
};

const buttonCategory = document.querySelectorAll('.btn-cate');

const handleOnClick = (e)=> {
    e.preventDefault();

    const self = e.currentTarget;
    const region = self.dataset.region;
    const logoItem = document.querySelectorAll('.logo-item');
    const selectLogoItem = document.querySelectorAll(`.logo-item[data-region="${region}"]`);

    if (region === 'all') {
        logoItem.forEach((el)=> {
            el.style.display = 'block';
        });
    }else {
        logoItem.forEach((el)=> {
            el.style.display = 'none';
        });
        selectLogoItem.forEach((el)=> {
            el.style.display = 'block';
        });
    }
    
    buttonCategory.forEach(el=> {
        el.classList.remove('active');
    });

    self.classList.add('active');
}

buttonCategory.forEach((el, key)=> {
    el.addEventListener('click', handleOnClick);
});

function sortData(data) {
    const returnData = data.sort((a, b)=> {
        let x = a.name.toLowerCase();
        let y = b.name.toLowerCase();

        if (x < y) {
            return -1
        }
        if (x > y) {
            return 1
        }
        return 0;
    });

    return returnData;
}

const drawLogos = ()=> {
    let html = '';
    const container = document.querySelector('#logos');

    const data = sortData(logoData);
    
    data.map((item)=> {
        html += `<div class="logo-item" data-region="${item.region}" data-name="${item.name}"><a href="${item.link}"><img src="${item.img}" /></a></div>`;

        container.innerHTML = html;
    });
}

const schoolNavEvent = ()=> {
    const btn = document.querySelectorAll('.page-nav-item > a');
    const subBtn = document.querySelectorAll('.page-nav-item-sub > a');

    btn.forEach((el)=> {
        el.addEventListener('click', (e)=>{
            e.preventDefault();
    
            const subListAll = document.querySelectorAll('.page-nav-list-sub');
            const subList = e.currentTarget.nextElementSibling;

            subListAll.forEach((el)=> {
                el.style.display = 'none'
            });
    
            subList.style.display = 'block'

            btn.forEach(el=> {
                el.classList.remove('active');
            });
        
            e.currentTarget.classList.add('active');
        });
    });
}

const drawSchoolNav = ()=> {
    const url = location.search;
    const com_board_idx = getParames(url, 'com_board_idx');

    console.log(`com_board_id${getParames(url, 'com_board_id')}`);
    console.log(`com_board_idx${getParames(url, 'com_board_idx')}`);

    const test = `/chtml/board.php?template=bizdemo136532&amp;com_board_basic=file_download&amp;com_board_id=${getParames(url, 'com_board_id')}&amp;com_board_idx=${getParames(url, 'com_board_idx')}&amp;com_board_file_seq=0`;

    console.log(`download link: ${test}`);

    const sudo = logoData.filter((item)=> {
        return item.region === '¼öµµ±Ç';
    });
    const chungcheong = logoData.filter((item)=> {
        return item.region === 'Ãæû°­¿ø±Ç';
    });
    const daeguGyeongbug = logoData.filter((item)=> {
        return item.region === '´ë±¸°æºÏ±Ç';
    });
    const busanUlsanGyeongnam    = logoData.filter((item)=> {
        return item.region === 'ºÎ»ê¿ï»ê°æ³²±Ç';
    });
    const honamJeju = logoData.filter((item)=> {
        return item.region === 'È£³²Á¦ÁÖ±Ç';
    });

    function activeItem(linkData) {
        let array = [];
        linkData.map((item)=> {
            let param = getParames(item.link, 'com_board_idx')
            array.push(param);
        })

        return array.includes(com_board_idx);
    }

    function drawItem(data) {
        let html = '';
        
        data.map((item, i)=> {
            html += `<li class="page-nav-item-sub ${ com_board_idx === getParames(item.link, 'com_board_idx') ? 'active': '' }"><a href="${item.link}" data-region="${item.region}" data-name="${item.name}">${item.name}</a></li>`;
        });

        return html;
    }

    let navHtml = `
        <ul class="page-nav-list">
            <li class="page-nav-item ${ activeItem(sudo)? 'active': '' }"><a href="#">¼öµµ±Ç</a>
                <ul class="page-nav-list-sub">
                    ${ drawItem( sortData(sudo) )}
                </ul>
            </li>
            <li class="page-nav-item ${ activeItem(chungcheong)? 'active': '' }"><a href="#">Ãæû ¡¤ °­¿ø±Ç</a>
                <ul class="page-nav-list-sub">
                    ${ drawItem( sortData(chungcheong) )}
                </ul>
            </li>
            <li class="page-nav-item ${ activeItem(daeguGyeongbug)? 'active': '' }"><a href="#">´ë±¸ ¡¤ °æºÏ±Ç</a>
                <ul class="page-nav-list-sub">
                    ${ drawItem( sortData(daeguGyeongbug) )}
                </ul>
            </li>
            <li class="page-nav-item ${ activeItem(busanUlsanGyeongnam)? 'active': '' }"><a href="#">ºÎ»ê ¡¤ ¿ï»ê ¡¤ °æ³²±Ç</a>
                <ul class="page-nav-list-sub">
                    ${ drawItem( sortData(busanUlsanGyeongnam) )}
                </ul>
            </li>
            <li class="page-nav-item ${ activeItem(honamJeju)? 'active': '' }"><a href="#">È£³² ¡¤ Á¦ÁÖ±Ç</a>
                <ul class="page-nav-list-sub">
                    ${ drawItem( sortData(honamJeju) )}
                </ul>
            </li>
        </ul>
    `;

    const navEl = document.getElementById('school-nav');

    navEl.innerHTML = '';
    navEl.innerHTML = navHtml;
}

window.onload = ()=> {
    // console.log('pageName:', pageName);
    if (document.getElementById('logos')) {
        drawLogos();
    }

    if (document.getElementById('school-nav')) {
        drawSchoolNav();
        schoolNavEvent();
    }

    // »ç¾÷°èȹ¼­ ÆäÀÌÁö
    if (document.getElementById('bs-detail')) {
        // ´ëÇк° »ç¾÷¼Ò°³ »ó¼¼ ÆäÀÌÁö ÆÄÀÏ ¸®½ºÆ® ½ºÅ¸ÀÏ ¼öÁ¤ 
        const tds = document.querySelectorAll('td font');
        tds.forEach(el=> {
            if (el.innerHTML.includes('Áֱ⠻ç¾÷ ¼Ò°³')) {
                el.classList.add('findTD');
            }
        });
        
        const businessPlanFileElements = document.querySelector('.findTD').parentElement.nextElementSibling.children;
        for (let i=0; i<businessPlanFileElements.length; i++) {
            businessPlanFileElements[i].style.height = 'auto'
        }
    }

    //»ç¾÷ ¼º°ú > »ç¾÷ °èȹ¼­ ¸®½ºÆ® 
    if (document.querySelector('.table-business-plan')) {
        const btnDownloadsParent = document.querySelectorAll('tr');

        btnDownloadsParent.forEach(el=> {
            const btnDownload = el.querySelectorAll('.bbs_download');

            btnDownload.forEach((el, i)=> {
                el.classList.add('index'+i);
            });
        });
    }

    /* if (pageName === 'businessPlan') {
        const region = document.querySelectorAll('.bbsetc_address');
        const searchKeyword = '¼öµµ±Ç';
        
        region.forEach(el=> {
            if (el.innerHTML.includes(searchKeyword)) {
                console.log(el);
            }
        });
    } */
}