@extends('partials.master')
@section('content')
	<!--begin::Content-->
	<div id="kt_app_content" class="app-content flex-column-fluid">
		
		<!--begin::Content container-->
		<div id="kt_app_content_container" class="app-container container-xxl">
			<!--begin::Navbar-->
			<div class="card mb-5 mb-xl-10">
				<div class="card-body pt-9 pb-0">
					<!--begin::Details-->
					<div class="d-flex flex-wrap flex-sm-nowrap">
						<!--begin: Pic-->
						<div class="me-7 mb-4">
							<div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-relative">
								<img src="{{ asset('assets/media/avatars/blank.png') }}" alt="image" />
								<div class="position-absolute translate-middle bottom-0 start-100 mb-6 bg-success rounded-circle border border-4 border-body h-20px w-20px"></div>
							</div>
						</div>
						<!--end::Pic-->
						<!--begin::Info-->
						<div class="flex-grow-1">
							<!--begin::Title-->
							<div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
								<!--begin::User-->
								<div class="d-flex flex-column">
									<!--begin::Name-->
									<div class="d-flex align-items-center mb-2">
										<a href="#" class="text-gray-900 text-hover-primary fs-2 fw-bold me-1">{{ $guru->nama_guru }}</a>
										<a href="#">
											<i class="ki-outline ki-verify fs-1 text-primary"></i>
										</a>
									</div>
									<!--end::Name-->
									<!--begin::Info-->
									<div class="d-flex flex-wrap fw-semibold fs-6 mb-4 pe-2">
										<a href="#" class="d-flex align-items-center text-gray-400 text-hover-primary me-5 mb-2">
										<i class="ki-outline ki-profile-circle fs-4 me-1"></i>Kelas</a>
										<a href="#" class="d-flex align-items-center text-gray-400 text-hover-primary me-5 mb-2">
										<i class="ki-outline ki-geolocation fs-4 me-1"></i>Wali Kelas</a>
										<a href="#" class="d-flex align-items-center text-gray-400 text-hover-primary mb-2">
										<i class="ki-outline ki-sms fs-4 me-1"></i>Kirim Whatsapp</a>
									</div>
									<!--end::Info-->
								</div>
								<!--end::User-->
								<!--begin::Actions-->
								<div class="d-flex my-4">
									<a href="#" class="btn btn-sm btn-light me-2" id="kt_user_follow_button">
										<i class="ki-outline ki-check fs-3 d-none"></i>
										<!--begin::Indicator label-->
										<span class="indicator-label">Follow</span>
										<!--end::Indicator label-->
										<!--begin::Indicator progress-->
										<span class="indicator-progress">Please wait...
										<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
										<!--end::Indicator progress-->
									</a>
									<a href="#" class="btn btn-sm btn-primary me-3" data-bs-toggle="modal" data-bs-target="#kt_modal_offer_a_deal">Hire Me</a>
									<!--begin::Menu-->
									<div class="me-0">
										<button class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
											<i class="ki-solid ki-dots-horizontal fs-2x me-1"></i>
										</button>
										<!--begin::Menu 3-->
										<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-3" data-kt-menu="true">
											<!--begin::Heading-->
											<div class="menu-item px-3">
												<div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Payments</div>
											</div>
											<!--end::Heading-->
											<!--begin::Menu item-->
											<div class="menu-item px-3">
												<a href="#" class="menu-link px-3">Create Invoice</a>
											</div>
											<!--end::Menu item-->
											<!--begin::Menu item-->
											<div class="menu-item px-3">
												<a href="#" class="menu-link flex-stack px-3">Create Payment
												<span class="ms-2" data-bs-toggle="tooltip" title="Specify a target name for future usage and reference">
													<i class="ki-outline ki-information fs-6"></i>
												</span></a>
											</div>
											<!--end::Menu item-->
											<!--begin::Menu item-->
											<div class="menu-item px-3">
												<a href="#" class="menu-link px-3">Generate Bill</a>
											</div>
											<!--end::Menu item-->
											<!--begin::Menu item-->
											<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-end">
												<a href="#" class="menu-link px-3">
													<span class="menu-title">Subscription</span>
													<span class="menu-arrow"></span>
												</a>
												<!--begin::Menu sub-->
												<div class="menu-sub menu-sub-dropdown w-175px py-4">
													<!--begin::Menu item-->
													<div class="menu-item px-3">
														<a href="#" class="menu-link px-3">Plans</a>
													</div>
													<!--end::Menu item-->
													<!--begin::Menu item-->
													<div class="menu-item px-3">
														<a href="#" class="menu-link px-3">Billing</a>
													</div>
													<!--end::Menu item-->
													<!--begin::Menu item-->
													<div class="menu-item px-3">
														<a href="#" class="menu-link px-3">Statements</a>
													</div>
													<!--end::Menu item-->
													<!--begin::Menu separator-->
													<div class="separator my-2"></div>
													<!--end::Menu separator-->
													<!--begin::Menu item-->
													<div class="menu-item px-3">
														<div class="menu-content px-3">
															<!--begin::Switch-->
															<label class="form-check form-switch form-check-custom form-check-solid">
																<!--begin::Input-->
																<input class="form-check-input w-30px h-20px" type="checkbox" value="1" checked="checked" name="notifications" />
																<!--end::Input-->
																<!--end::Label-->
																<span class="form-check-label text-muted fs-6">Recuring</span>
																<!--end::Label-->
															</label>
															<!--end::Switch-->
														</div>
													</div>
													<!--end::Menu item-->
												</div>
												<!--end::Menu sub-->
											</div>
											<!--end::Menu item-->
											<!--begin::Menu item-->
											<div class="menu-item px-3 my-1">
												<a href="#" class="menu-link px-3">Settings</a>
											</div>
											<!--end::Menu item-->
										</div>
										<!--end::Menu 3-->
									</div>
									<!--end::Menu-->
								</div>
								<!--end::Actions-->
							</div>
							<!--end::Title-->
							<!--begin::Stats-->
							<div class="d-flex flex-wrap flex-stack">
								<!--begin::Wrapper-->
								<!-- <div class="d-flex flex-column flex-grow-1 pe-8">
									<div class="d-flex flex-wrap">
										<div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
											<div class="d-flex align-items-center">
												<i class="ki-outline ki-arrow-up fs-3 text-success me-2"></i>
												<div class="fs-2 fw-bold" data-kt-countup="true" data-kt-countup-value="100000" data-kt-countup-prefix="Rp.">0</div>
											</div>
											<div class="fw-semibold fs-6 text-gray-400">Uang Saku</div>
										</div>
										<div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
											<div class="d-flex align-items-center">
												<i class="ki-outline ki-arrow-down fs-3 text-danger me-2"></i>
												<div class="fs-2 fw-bold" data-kt-countup="true" data-kt-countup-value="80000" data-kt-countup-prefix="Rp.">0</div>
											</div>
											<div class="fw-semibold fs-6 text-gray-400">Diambil</div>
										</div>
										<div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
											<div class="d-flex align-items-center">
												<i class="ki-outline ki-arrow-up fs-3 text-success me-2"></i>
												<div class="fs-2 fw-bold" data-kt-countup="true" data-kt-countup-value="20000" data-kt-countup-prefix="Rp.">0</div>
											</div>
											<div class="fw-semibold fs-6 text-gray-400">Sisa</div>
										</div>
									</div>
								</div> -->
								<!--end::Wrapper-->
								<!--begin::Progress-->
								<div class="d-flex align-items-center w-200px w-sm-300px flex-column mt-3">
									<!-- <div class="d-flex justify-content-between w-100 mt-auto mb-2">
										<span class="fw-semibold fs-6 text-gray-400">Profile Compleation</span>
										<span class="fw-bold fs-6">90%</span>
									</div>
									<div class="h-5px mx-3 w-100 bg-light mb-3">
										<div class="bg-success rounded h-5px" role="progressbar" style="width: 90%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
									</div> -->
								</div>
								<!--end::Progress-->
							</div>
							<!--end::Stats-->
						</div>
						<!--end::Info-->
					</div>
					<!--end::Details-->
					<!--begin::Navs-->
					<ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold">
						<!--begin::Nav item-->
						<li class="nav-item mt-2">
							<a class="nav-link text-active-primary ms-0 me-10 py-5 {{ (request()->segment(3) == 'show') ? 'active' : '' }}" href="{{ route('/admin.guru.show',['id'=>$guru->id]) }}">Data Diri</a>
						</li>
						<!--end::Nav item-->
						<!--begin::Nav item-->
						<li class="nav-item mt-2">
							<a class="nav-link text-active-primary ms-0 me-10 py-5 {{ (request()->segment(3) == 'dataKeluarga') ? 'active' : '' }}" href="{{ route('/admin.guru.dataKeluarga',['id'=>$guru->id]) }}">Data Keluarga</a>
						</li>
						<!--end::Nav item-->
						<!--begin::Nav item-->
						<li class="nav-item mt-2">
							<a class="nav-link text-active-primary ms-0 me-10 py-5 {{ (request()->segment(3) == 'dataBerkas') ? 'active' : '' }}" href="{{ route('/admin.guru.dataBerkas',['id'=>$guru->id]) }}">Data Berkas</a>
						</li>
						<!--end::Nav item-->
						<!--begin::Nav item-->
						<li class="nav-item mt-2">
							<a class="nav-link text-active-primary ms-0 me-10 py-5 {{ (request()->segment(3) == 'dataKelas') ? 'active' : '' }}" href="{{ route('/admin.guru.dataKelas',['id'=>$guru->id]) }}">Data Kelas</a>
						</li>
						<!--end::Nav item-->
						<!--begin::Nav item-->
						<li class="nav-item mt-2">
							<a class="nav-link text-active-primary ms-0 me-10 py-5 {{ (request()->segment(3) == 'dataPembayaran') ? 'active' : '' }}" href="{{ route('/admin.guru.dataPembayaran',['id'=>$guru->id]) }}">Data Pembayaran</a>
						</li>
						<!--end::Nav item-->
					</ul>
					<!--begin::Navs-->
				</div>
			</div>
			<!--end::Navbar-->

			<!-- BAGIAN UNTUK DATA SISWA YANG DI TIMPA -->
			@yield('data_guru')
			<!-- /BAGIAN UNTUK DATA SISWA YANG DI TIMPA -->
			
			<!--begin::Row-->
			<div class="row gy-5 g-xl-10">
				
			</div>
			<!--end::Row-->
			
		</div>
		<!--end::Content container-->

	</div>
	<!--end::Content-->
</div>
<!--end::Content wrapper-->
@endsection