<!DOCTYPE html>
<html>
	<head>
		<!-- Basic Page Info -->
		<meta charset="utf-8" />
		<title>Ayo Ramal</title>

		<!-- Site favicon -->
		<link
			rel="apple-touch-icon"
			sizes="180x180"
			href="logo atas"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="32x32"
			href="static/vendors/images/favicon-32x32.png"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="16x16"
			href="static/vendors/images/favicon-16x16.png"
		/>

		<!-- Mobile Specific Metas -->
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1"
		/>

		<!-- Google Font -->
		<link
			href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
			rel="stylesheet"
		/>
		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="static/vendors/styles/core.css" />
		<link
			rel="stylesheet"
			type="text/css"
			href="static/vendors/styles/icon-font.min.css"
		/>
		<link rel="stylesheet" type="text/css" href="static/vendors/styles/style.css" />

		<!-- Global site tag (gtag.js) - Google Analytics -->
		<script
			async
			src="https://www.googletagmanager.com/gtag/js?id=G-GBZ3SGGX85"
		></script>
		<script
			async
			src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2973766580778258"
			crossorigin="anonymous"
		></script>
		<script>
			window.dataLayer = window.dataLayer || [];
			function gtag() {
				dataLayer.push(arguments);
			}
			gtag("js", new Date());

			gtag("config", "G-GBZ3SGGX85");
		</script>
		<!-- Google Tag Manager -->
		<script>
			(function (w, d, s, l, i) {
				w[l] = w[l] || [];
				w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
				var f = d.getElementsByTagName(s)[0],
					j = d.createElement(s),
					dl = l != "dataLayer" ? "&l=" + l : "";
				j.async = true;
				j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
				f.parentNode.insertBefore(j, f);
			})(window, document, "script", "dataLayer", "GTM-NXZMQSS");
		</script>
		<!-- End Google Tag Manager -->
	</head>
	<body>
		<div class="pre-loader">
			<div class="pre-loader-box">
				<div class="loader-logo">
					<img src="https://www.icegif.com/wp-content/uploads/2022/06/icegif-293.gif" alt="" />
				</div>
				<div class="loader-progress" id="progress_div">
					<div class="bar" id="bar1"></div>
				</div>
				<div class="percent" id="percent1">0%</div>
				<div class="loading-text">Loading...</div>
			</div>
		</div>

		<div class="header">
			<div class="header-left">
				<div class="menu-icon bi bi-list"></div>
				<div
					class="search-toggle-icon bi bi-search"
					data-toggle="header_search"
				></div>
				
			</div>
			<div class="header-right">
				<div class="dashboard-setting user-notification">
					<div class="dropdown">
						<a
							class="dropdown-toggle no-arrow"
							href="javascript:;"
							data-toggle="right-sidebar"
						>
							<i class="dw dw-settings2"></i>
						</a>
					</div>
				</div>
				
				<!-- <div class="user-info-dropdown">
					<div class="dropdown">
						<a
							class="dropdown-toggle"
							href="#"
							role="button"
							data-toggle="dropdown"
						>
							<span class="user-icon">
								<img src="static/vendors/images/photo1.jpg" alt="" />
							</span>
							<span class="user-name">Ross C. Lopez</span>
						</a>
						<div
							class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list"
						>
							<a class="dropdown-item" href="profile.html"
								><i class="dw dw-user1"></i> Profile</a
							>
							<a class="dropdown-item" href="profile.html"
								><i class="dw dw-settings2"></i> Setting</a
							>
							<a class="dropdown-item" href="faq.html"
								><i class="dw dw-help"></i> Help</a
							>
							<a class="dropdown-item" href="login.html"
								><i class="dw dw-logout"></i> Log Out</a
							>
						</div>
					</div>
				</div> -->
				<div class="github-link">
					<a href="#" 
						><img 
						style="width: 80px;"
						src="https://media.tenor.com/tGFp68ulbMIAAAAi/pom-bot.gif" alt=""
					/></a>
				</div>
			</div>
		</div>

		<div class="right-sidebar">
			<div class="sidebar-title">
				<h3 class="weight-600 font-16 text-blue">
					Layout Settings
					<span class="btn-block font-weight-400 font-12"
						>User Interface Settings</span
					>
				</h3>
				<div class="close-sidebar" data-toggle="right-sidebar-close">
					<i class="icon-copy ion-close-round"></i>
				</div>
			</div>
			<div class="right-sidebar-body customscroll">
				<div class="right-sidebar-body-content">
					<h4 class="weight-600 font-18 pb-10">Header Background</h4>
					<div class="sidebar-btn-group pb-30 mb-10">
						<a
							href="javascript:void(0);"
							class="btn btn-outline-primary header-white active"
							>White</a
						>
						<a
							href="javascript:void(0);"
							class="btn btn-outline-primary header-dark"
							>Dark</a
						>
					</div>

					<h4 class="weight-600 font-18 pb-10">Sidebar Background</h4>
					<div class="sidebar-btn-group pb-30 mb-10">
						<a
							href="javascript:void(0);"
							class="btn btn-outline-primary sidebar-light"
							>White</a
						>
						<a
							href="javascript:void(0);"
							class="btn btn-outline-primary sidebar-dark active"
							>Dark</a
						>
					</div>

					<h4 class="weight-600 font-18 pb-10">Menu Dropdown Icon</h4>
					<div class="sidebar-radio-group pb-10 mb-10">
						<div class="custom-control custom-radio custom-control-inline">
							<input
								type="radio"
								id="sidebaricon-1"
								name="menu-dropdown-icon"
								class="custom-control-input"
								value="icon-style-1"
								checked=""
							/>
							<label class="custom-control-label" for="sidebaricon-1"
								><i class="fa fa-angle-down"></i
							></label>
						</div>
						<div class="custom-control custom-radio custom-control-inline">
							<input
								type="radio"
								id="sidebaricon-2"
								name="menu-dropdown-icon"
								class="custom-control-input"
								value="icon-style-2"
							/>
							<label class="custom-control-label" for="sidebaricon-2"
								><i class="ion-plus-round"></i
							></label>
						</div>
						<div class="custom-control custom-radio custom-control-inline">
							<input
								type="radio"
								id="sidebaricon-3"
								name="menu-dropdown-icon"
								class="custom-control-input"
								value="icon-style-3"
							/>
							<label class="custom-control-label" for="sidebaricon-3"
								><i class="fa fa-angle-double-right"></i
							></label>
						</div>
					</div>

					<h4 class="weight-600 font-18 pb-10">Menu List Icon</h4>
					<div class="sidebar-radio-group pb-30 mb-10">
						<div class="custom-control custom-radio custom-control-inline">
							<input
								type="radio"
								id="sidebariconlist-1"
								name="menu-list-icon"
								class="custom-control-input"
								value="icon-list-style-1"
								checked=""
							/>
							<label class="custom-control-label" for="sidebariconlist-1"
								><i class="ion-minus-round"></i
							></label>
						</div>
						<div class="custom-control custom-radio custom-control-inline">
							<input
								type="radio"
								id="sidebariconlist-2"
								name="menu-list-icon"
								class="custom-control-input"
								value="icon-list-style-2"
							/>
							<label class="custom-control-label" for="sidebariconlist-2"
								><i class="fa fa-circle-o" aria-hidden="true"></i
							></label>
						</div>
						<div class="custom-control custom-radio custom-control-inline">
							<input
								type="radio"
								id="sidebariconlist-3"
								name="menu-list-icon"
								class="custom-control-input"
								value="icon-list-style-3"
							/>
							<label class="custom-control-label" for="sidebariconlist-3"
								><i class="dw dw-check"></i
							></label>
						</div>
						<div class="custom-control custom-radio custom-control-inline">
							<input
								type="radio"
								id="sidebariconlist-4"
								name="menu-list-icon"
								class="custom-control-input"
								value="icon-list-style-4"
								checked=""
							/>
							<label class="custom-control-label" for="sidebariconlist-4"
								><i class="icon-copy dw dw-next-2"></i
							></label>
						</div>
						<div class="custom-control custom-radio custom-control-inline">
							<input
								type="radio"
								id="sidebariconlist-5"
								name="menu-list-icon"
								class="custom-control-input"
								value="icon-list-style-5"
							/>
							<label class="custom-control-label" for="sidebariconlist-5"
								><i class="dw dw-fast-forward-1"></i
							></label>
						</div>
						<div class="custom-control custom-radio custom-control-inline">
							<input
								type="radio"
								id="sidebariconlist-6"
								name="menu-list-icon"
								class="custom-control-input"
								value="icon-list-style-6"
							/>
							<label class="custom-control-label" for="sidebariconlist-6"
								><i class="dw dw-next"></i
							></label>
						</div>
					</div>

					<div class="reset-options pt-30 text-center">
						<button class="btn btn-danger" id="reset-settings">
							Reset Settings
						</button>
					</div>
				</div>
			</div>
		</div>

		<div class="left-side-bar">	
			<div class="brand-logo">
				<a href="index.html">
					
						<img
					style="width: 50px;"
					src="https://www.icegif.com/wp-content/uploads/2023/10/icegif-939.gif" alt="" 
					class="dark-logo" />
					<p class="dark-logo" style="font-size: 20px; color: black; font-weight: bold; font-style: italic; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;" > Ayo Ramal</p>
				
					<img
						style="width: 20px; margin-right: 10px;"
						src="static/doctor.png"
						alt=""
						class="light-logo"
					/>
					<p class="light-logo" style="font-size: 20px; color: white; font-weight: bold; font-style: italic; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;" > Ayo Ramal</p>
				
				</a>
				<div class="close-sidebar" data-toggle="left-sidebar-close">
					<i class="ion-close-round"></i>
				</div>
			</div>
			<div class="menu-block customscroll">
				<div class="sidebar-menu">
					<ul id="accordion-menu">
						<li>
							<a href="http://localhost/steven/"  class="dropdown-toggle no-arrow">
								<span class="micon bi bi-house"></span
								><span class="mtext">Home</span>
							</a>
							
						</li>
						
						
						<li class="dropdown">
							<a href="javascript:;" class="dropdown-toggle">
								<span class="micon bi bi-hdd-stack"></span
								><span class="mtext">Data Master</span>
							</a>
							<ul class="submenu">
								<li><a href="http://localhost/steven/curah_hujan/list">Curah Hujan</a></li>
								<li><a href="http://localhost/steven/demam_berdarah/list">Deman Berdarah</a></li>
								
								
							</ul>
						</li> 
						<li class="dropdown">
							<a href="javascript:;" class="dropdown-toggle">
								<span class="micon bi bi-diagram-3"></span
								><span class="mtext">Peramalan</span>
							</a>
							<ul class="submenu">
								<li class="dropdown">
									<a href="javascript:;" class="dropdown-toggle">
										<span class="micon fa fa-plug"></span
										><span class="mtext">Curah Hujan </span>
									</a>
									<ul class="submenu child">
										<li><a href="http://127.0.0.1:5000/dif2">Uji Stationer</a></li>
										<li><a href="http://127.0.0.1:5000/curah_hujan">Evaluasi Model</a></li>
									</ul>
								</li>
								<li class="dropdown">
									<a href="javascript:;" class="dropdown-toggle">
										<span class="micon fa fa-plug"></span
										><span class="mtext">Demam Berdarah </span>
									</a>
									<ul class="submenu child">
										<li><a href="http://127.0.0.1:5000/dif">Uji Stationer</a></li>
										<li><a href="http://127.0.0.1:5000/">Evaluasi Model</a></li>
									</ul>
								</li>
							</ul>
						</li>

						<li>
							<a href="http://localhost/steven/hasil"  class="dropdown-toggle no-arrow">
								<span class="micon bi bi-hdd-stack"></span
								><span class="mtext">Hasil Peramalan</span>
							</a>
							
						</li>
						
						<li class="dropdown">
							<a href="javascript:;" class="dropdown-toggle">
								<span class="micon bi bi-receipt-cutoff"></span
								><span class="mtext">Laporan</span>
							</a>
							<ul class="submenu">
								<li><a href="http://localhost/steven/laporan/curah_hujan">Curah Hujan</a></li>
								<li><a href="http://localhost/steven/laporan/demam_berdarah">Deman Berdarah</a></li>
								
								
							</ul>
						</li>
						<li>
							<div class="dropdown-divider"></div>
						</li>
						
					
					</ul>
				</div>
			</div>
		</div>
		<div class="mobile-menu-overlay"></div>

		<div class="main-container">
			<div class="pd-ltr-20 xs-pd-20-10">
				<div class="min-height-200px">
					<div class="page-header">
						<div class="row" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
							
							<p style="font-size: medium; font-weight: bold; text-align: center;" >Masukkan Order ARIMA untuk pengujian<p>
							
							<!-- input -->
							<form method="POST" action="/curah_hujan">
								<label for="p_order" style="font-size: medium; font-weight: bold;">Nilai p:</label>
								<input type="text" id="p_order" name="p_order" required style="margin-right: 10px; border-radius: 5%;">
						
								<label for="d_order" style="font-size: medium; font-weight: bold;">Nilai d:</label>
								<input type="text" id="d_order" name="d_order" required style="margin-right: 10px; border-radius: 5%;">
						
								<label for="q_order" style="font-size: medium; font-weight: bold;">Nilai q:</label>
								<input type="text" id="q_order" name="q_order" required style="margin-right: 10px; border-radius: 5%;">
						
								<button
											type="submit"
											value="submit"
											class="btn btn-primary"
											data-toggle="button"
											aria-pressed="false"
											autocomplete="off"
										>
											Lanjut
										</button>
							</form>
							
						</div>
					</div>
					
                    <!-- body -->
                    <div class="body">
                        

						<div class="page-header">
							<div class="row" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
								
								<p style="font-size: medium; font-weight: bold; text-align: center;" >Data yang akan digunakan</p>
								<table class="table table-bordered" style="border: 3px solid black;">
									<thead style="border: 3px solid black;">
									  <tr style="border: 3px solid black;">
										<th scope="col">Data</th>
										
									  </tr>
									</thead>
									<tbody style="border: 3px solid black;">
									  <tr style="border: 3px solid black;">
										<th style="border: 3px solid black;">-></th>
										{% for value in data_series2 %}
										<th style="border: 3px solid black;">
										
										{{ value }}
									
								</th>
								{% endfor %}
									  </tr>
									</tbody>
								  </table>


								  
								
											 
								
								
							</div>
						</div>

						<br>
						
						<div class="page-header">
							<div class="row" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
								<p style="font-size: medium; font-weight: bold; text-align: center;" >Ringkasan</p>
								<center>
									<pre style="background-color: azure; width: fit-content; border-radius: 3%;">{{ model_summary2 }}</pre>
								</center>
                        <br>
							</div>
						</div>

						<div class="page-header">
							<div class="row" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
								
								<p style="font-size: medium; font-weight: bold; text-align: center;" >Nilai P-Value</p>
								<table class="table table-bordered" style="border: 3px solid black;">
									<thead style="border: 3px solid black;">
									  <tr style="border: 3px solid black;">
										<th scope="col">Nilai P-Value</th>
										
									  </tr>
									</thead>
									<tbody style="border: 3px solid black;">
									  <tr style="border: 3px solid black;">
										<th style="border: 3px solid black;">-></th>
										{% for value in p_value2 %}
										<th style="border: 3px solid black;">
										
										{{ value }}
									
								</th>
								{% endfor %}
									  </tr>
									</tbody>
								  </table>
											 
								
								
							</div>
						</div>


						<div class="page-header">
							<div class="row" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
								
								<p style="font-size: medium; font-weight: bold; text-align: center;" >Hasil peramalan</p>
								<div class="table-responsive">
								<table class="data-table table stripe hover" style="border: 1px solid black;">
									<thead style="border: 1px solid black;">
									  <tr style="border: 1px solid black;">
										<th scope="col">Hasil Peramalan</th>
										
									  </tr>
									</thead>
									<tbody style="border: 1px solid black;">
									  <tr style="border: 1px solid black;">
										<th style="border: 1px solid black;">-></th>
										{% for value in forecast2 %}
										<th style="border: 1px solid black; font-size: 15px;">
										
										{{ value }}
									
								</th>
								{% endfor %}
									  </tr>
									</tbody>
								  </table>
								</div>
								<p> Hasil peramalan berada di halaman <a href="http://localhost/steven/hasil"> hasil </a> </p>
											 
								
								
							</div>
						</div>

						
						<form method="POST" action="/save_forecast2">
							<input type="hidden" name="forecast_values2" value="{{ forecast2|join(',') }}">
							<button type="submit" class="btn btn-primary">Simpan</button>
						</form>
						
                       
                        
                       
                 
                           
                      
                    
                        
                        
                        
                        
			</div>
		</div>
		<!-- welcome modal start -->
		<!-- welcome modal end -->
		<!-- js -->
		<script src="static/vendors/scripts/core.js"></script>
		<script src="static/vendors/scripts/script.min.js"></script>
		<script src="static/vendors/scripts/process.js"></script>
		<script src="static/vendors/scripts/layout-settings.js"></script>
		<!-- Google Tag Manager (noscript) -->
		<noscript
			><iframe
				src="https://www.googletagmanager.com/ns.html?id=GTM-NXZMQSS"
				height="0"
				width="0"
				style="display: none; visibility: hidden"
			></iframe
		></noscript>
		<!-- End Google Tag Manager (noscript) -->
	</body>
</html>
