package corporate_mcudetail

import "cpone/models"
import "strconv"

templ McuDetailTabView(
    McuID string,
    McuTab []models.McuTabModels,
) {
    <div>
        <ul class="nav nav-tabs nav-tabs-line">
            for i, d := range McuTab {
                if i == 0 {
                    <li class="nav-item">
                        <a 
                            class="nav-link active" 
                            data-toggle="tab" 
                            href={templ.URL("#mcu_tab_" + strconv.Itoa(i))}
                        >{ d.TabName }</a>
                    </li>
                } else {
                    <li class="nav-item">
                        <a 
                            class="nav-link" 
                            data-toggle="tab" 
                            href={templ.URL("#mcu_tab_" + strconv.Itoa(i))}
                        >{ d.TabName }</a>
                    </li>
                }
            }
            <li class="nav-item">
                <a
                    if len(McuTab) == 0 {
                        class="nav-link active"
                    } else {
                        class="nav-link"
                    }
                    data-toggle="tab"
                    href={templ.URL("#mcu_tab_" + strconv.Itoa(len(McuTab) + 1))}
                >Kesimpulan</a>
            </li>
            <li class="nav-item">
                <a
                    class="nav-link"
                    data-toggle="tab"
                    href={templ.URL("#mcu_tab_" + strconv.Itoa(len(McuTab) + 2))}
                >Daftar Peserta</a>
            </li>
            <li class="nav-item">
                <a
                    class="nav-link"
                    data-toggle="tab"
                    href={templ.URL("#mcu_tab_" + strconv.Itoa(len(McuTab) + 3))}
                >Executive Summary</a>
            </li>
            <li class="nav-item">
                <a
                    class="nav-link"
                    data-toggle="tab"
                    href={templ.URL("#mcu_tab_" + strconv.Itoa(len(McuTab) + 4))}
                >Keuangan</a>
            </li>
        </ul>
    </div>
    <div class="tab-content mt-5" id="mcutabcontent">
        for i, d := range McuTab {
            if i == 0 {
                <div 
                    class="tab-pane fade show active" role="tabpanel"
                    id={"mcu_tab_" + strconv.Itoa(i)}
                    aria-labelledby={"mcu_tab_" + strconv.Itoa(i)}
                    hx-get={"/corp/dashboard_pic/detail/" + McuID +"/" + d.TabID}
                    hx-target={"#" + d.TabID}
                    hx-trigger="load"
                    hx-indicator={"." + d.TabID + d.Mcu_ImageGrafikGroupMenu}
                >
                    <div id={d.TabID}></div>
                    <div style="display: flex; justify-content: center; align-items: center;">
                        <span class={"htmx-indicator spinner-border spinner-border-lg " + d.TabID + d.Mcu_ImageGrafikGroupMenu} role="status" aria-hidden="true"></span>
                    </div>
                </div>
            } else {
                <div 
                    class="tab-pane fade" role="tabpanel"
                    id={"mcu_tab_" + strconv.Itoa(i)}
                    aria-labelledby={"mcu_tab_" + strconv.Itoa(i)}
                    hx-get={"/corp/dashboard_pic/detail/" + McuID +"/" + d.TabID}
                    hx-target={"#" + d.TabID}
                    hx-trigger="load"
                    hx-indicator={"." + d.TabID + d.Mcu_ImageGrafikGroupMenu}
                >
                    <div id={d.TabID}></div>
                    <div style="display: flex; justify-content: center; align-items: center;">
                        <span class={"htmx-indicator spinner-border spinner-border-lg " + d.TabID + d.Mcu_ImageGrafikGroupMenu} role="status" aria-hidden="true"></span>
                    </div>
                </div>
            }
        }
        <div 
            if len(McuTab) == 0 { 
                class="tab-pane fade show active" 
            } else {
                class="tab-pane fade"
            }
            role="tabpanel"
            id={"mcu_tab_" + strconv.Itoa(len(McuTab) + 1)}
            aria-labelledby={"mcu_tab_" + strconv.Itoa(len(McuTab) + 1)}
            hx-get={"/corp/dashboard_pic/detail/" + McuID +"/tabkesimpulan"}
            hx-target="#tabkesimpulan"
            hx-trigger="load"
            hx-indicator=".kesimpulanloading"
        >
            <div id="tabkesimpulan"></div>
			<div style="display: flex; justify-content: center; align-items: center;">
				<span class="htmx-indicator spinner-border spinner-border-lg kesimpulanloading" role="status" aria-hidden="true"></span>
			</div>
        </div>
        <div 
            class="tab-pane fade" role="tabpanel"
            id={"mcu_tab_" + strconv.Itoa(len(McuTab) + 2)}
            aria-labelledby={"mcu_tab_" + strconv.Itoa(len(McuTab) + 2)}
            hx-get={"/corp/dashboard_pic/detail/" + McuID +"/tabdaftarpeserta"}
            hx-target="#tabdaftarpeserta"
            hx-trigger="load"
            hx-indicator=".tabdaftarpesertaload"
        >
            <div id="tabdaftarpeserta"></div>
            <div style="display: flex; justify-content: center; align-items: center;">
				<span class="htmx-indicator spinner-border spinner-border-lg tabdaftarpesertaload" role="status" aria-hidden="true"></span>
			</div>
        </div>
        <div 
            class="tab-pane fade" role="tabpanel"
            id={"mcu_tab_" + strconv.Itoa(len(McuTab) + 3)}
            aria-labelledby={"mcu_tab_" + strconv.Itoa(len(McuTab) + 3)}
            style="height: 700px;"
        >
            <object 
                data={"/birt/run?__report=report/one/mcu/rpt_executive_summary_mcu_001.rptdesign&__format=pdf&PID="+McuID+"&username=admin&tm=1722914077866"} 
                type="application/pdf" width="100%" height="100%"
            ></object>
        </div>
        <div 
            class="tab-pane fade" role="tabpanel"
            id={"mcu_tab_" + strconv.Itoa(len(McuTab) + 4)}
            aria-labelledby={"mcu_tab_" + strconv.Itoa(len(McuTab) + 4)}
            hx-get={"/corp/dashboard_pic/detail/" + McuID +"/tabkeuangan"}
            hx-target="#tabkeuangan"
            hx-trigger="load"
            hx-indicator=".uangloading"
        >
            <div id="tabkeuangan"></div>
            <div style="display: flex; justify-content: center; align-items: center;">
				<span class="htmx-indicator spinner-border spinner-border-lg uangloading" role="status" aria-hidden="true"></span>
			</div>
        </div>
    </div>
}