package kelainanglobal

import (
	"github.com/emarifer/go-templ-project-structure/views/layout"
	chart "github.com/emarifer/go-templ-project-structure/views/component/chart"
)

templ MainKelainanGlobal(divMcu string, dataMcu string, divFisik string, dataFisik string) {
	<div id="div-chart">
		@HeaderKelainanGlobal()
		<div class="d-flex flex-column flex-root bg-white mt-25">
			<!-- begin::Navbar -->
			<div class="d-flex justify-content-center ">
				<h3 class="mb-3 title">Data Persentase Kelainan Global</h3>
			</div>
			<div class="row justify-content-center">
				<div class="col-12 text-center mb-10">
					@chart.ShowChart(divMcu, dataMcu)
				</div>
				<div class="col-12 text-center">
					@chart.ShowChart(divFisik, dataFisik)
				</div>
			</div>
			<!-- end::Navbar -->
		</div>
	</div>
}

templ CssKelainanGlobal() {
	<link
		rel="stylesheet"
		href="assets/css/googlefont/poppins.css"
	/>
	<link
		rel="stylesheet"
		href="assets/css/googlefont/publicsans.css"
	/>
	<link
		rel="stylesheet"
		href="assets/css/googlefont/roboto.css"
	/>
	<style>
    body {
      background-color: white;
      /* padding-right: 100px;
            padding-left: 100px; */
    }
    #div-chart {
        /* overflow-x: scroll; */
        margin: 40px 10vw 40px 10vw;
    }
    .title {
        font-size:20px;
        font-weight: bold;
    }
    #title {
        font-weight: 600;
    }
    
</style>
}

templ JsKelainanGlobal() {
	// echart
	<script src="assets/js/echarts-js/echart.min.js"></script>
}

templ HeaderKelainanGlobal() {
	<!-- breadcrumb & icon tanya START -->
	<div class="row">
		<div class="col-11">
			<h1 class="title text-black" style="margin-bottom: 0">
				PT. Sadhana Abiyasa Sampoerna
			</h1>
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb" style="margin-bottom: 0">
					<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
					<li class="breadcrumb-item">
						<a href="#">Employee Health Medical Analytic</a>
					</li>
					<li class="breadcrumb-item">
						<a href="#">PT. Sadhana Abiyasa Sampoerna</a>
					</li>
					<li class="breadcrumb-item active" aria-current="page">
						Mcu Karyawan
					</li>
				</ol>
			</nav>
		</div>
		<div class="col-1 align-content-center">
			<!-- align-content-center -->
			<div class="d-flex justify-content-end">
				<a href="#">
					<i class="fas fa-info-circle text-primary"></i>
				</a>
			</div>
		</div>
	</div>
	<!-- breadcrumb & icon tanya END -->
	<div class="mt-10">
		<ul class="nav nav-tabs nav-tabs-line">
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_1">Peserta</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2">Kelainan global</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_3">Kelainan Lab</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_4">kelainan Non Lab</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_5">kelainan Fisik</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_6">Kesimpulan & Saran</a>
			</li>
			<li class="nav-item">
				<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_7">Daftar Peserta</a>
			</li>
		</ul>
	</div>
}

templ ShowKelainanGlobal(title string, cmp templ.Component, css templ.Component, js templ.Component) {
	@layout.PlaygroundLayout(title, css, js) {
		@cmp
	}
}
