@extends('_layout.app')

@section('toolbar')
<div id="kt_app_toolbar" class="app-toolbar">
	<!--begin::Toolbar container-->
	<div id="kt_app_toolbar_container" class="container-fluid d-flex align-items-stretch px-0">
		<!--begin::Toolbar wrapper-->
		<div class="app-toolbar-wrapper d-flex flex-stack flex-wrap gap-4 w-100">
			<!--begin::Page title-->
			<div class="page-title d-flex flex-column justify-content-center gap-1 me-3">
				<!--begin::Title-->
				<h1 class="page-heading d-flex flex-column justify-content-center text-gray-900 fw-bold fs-3 m-0">Product Life Cycle</h1>
				<!--end::Title-->
				<!--begin::Breadcrumb-->
				<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0">
					<!--begin::Item-->
					<li class="breadcrumb-item text-muted">
						<a href="index.html" class="text-muted text-hover-primary">Home</a>
					</li>
					<!--end::Item-->
					<!--begin::Item-->
					<li class="breadcrumb-item">
						<span class="bullet bg-gray-500 w-5px h-2px"></span>
					</li>
					<!--end::Item-->
					<!--begin::Item-->
					<li class="breadcrumb-item text-muted">Product & Portfolio Strategic</li>
					<!--end::Item-->
				</ul>
				<!--end::Breadcrumb-->
			</div>
			<!--end::Page title-->
			<!--begin::Actions-->
			
			<!--end::Actions-->
		</div>
		<!--end::Toolbar wrapper-->
	</div>
	<!--end::Toolbar container-->
</div>
@endsection
@section('content')
<div class="d-flex flex-wrap flex-stack my-5">
	<!--begin::Heading-->
	<h2 id="header-title" class="fs-2 fw-bold my-2">Finnet Product Life Cycle</h2>
	<!--end::Heading-->
</div>
<div class="d-flex flex-column flex-lg-row flex-grow h-680px gap-5">
	<!--begin::Content-->
	<div class="flex-basis">
		
		<div class="card h-100">
			<!--begin::Card body-->
			<div class="card-body card-body d-flex flex-column">
				<div>
				    <label class="form-label fw-bold">Product</label>
				    <select id="product" class="form-select form-select-solid w-350px" data-control="select2" data-placeholder="Pilih Produk">
					    <option></option>
					    @foreach($product as $item)
					    	<option value="{{$item['id']}}" data-code="{{$item['code']}}">{{$item['name']}}</option>
					    @endforeach
					</select>
				</div>
				<hr class="my-5" />
				<div class="d-flex align-items-center h-100">
					<div class="chart-life-cycle-bg w-100 d-flex align-items-end justify-content-center">
						<div class="chart-life-cycle-stage">
							<img src="{{asset('img/lifecycle/curve-intro.png')}}" />
							<div id="chart-life-cycle-tooltip-intro" class="chart-life-cycle-tooltip intro hide">Finpay</div>
						</div>
						<div class="chart-life-cycle-stage">
							<img src="{{asset('img/lifecycle/curve-growth.png')}}" />
							<div id="chart-life-cycle-tooltip-growth" class="chart-life-cycle-tooltip growth hide">Finpay</div>
						</div>
						<div class="chart-life-cycle-stage">
							<img src="{{asset('img/lifecycle/curve-maturity.png')}}" />
							<div id="chart-life-cycle-tooltip-maturity" class="chart-life-cycle-tooltip maturity hide">Finpay</div>
						</div>
						<div class="chart-life-cycle-stage">
							<img src="{{asset('img/lifecycle/curve-decline.png')}}" />
							<div id="chart-life-cycle-tooltip-decline" class="chart-life-cycle-tooltip decline hide">Finpay</div>
						</div>
					</div>
				</div>
				<div id="chart-placeholder" class="d-flex h-100 align-items-center justify-content-center hide">
					<div class="d-flex flex-column fs-6 py-3 align-items-center">
						<img class="w-150px" src="{{asset('img/not-found.png')}}">
						<div class="text-center mt-2">
							<b>Oops.. Belum ada produk yang dipilih</b>
							<p>Silahkan pilih produknya terlebih dahulu</p>
						</div>
					</div>
				</div>
			</div>
			<!--end::Card body-->
		</div>
	</div>
	<!--end::Content-->
	<!--begin::Sidebar-detail-->
	<div class="flex-basis flex-column">
		<!--begin::Card-->
		<div class="card h-100 scroll py-5">
			<div class="card-header flex-nowrap min-h-unset border-transparent">
				<!--begin::Title-->
				<h3 class="card-title align-items-start flex-column">
					<span class="card-label fw-bold text-gray-900">Details</span>
				</h3>
				<!--end::Title-->
				<!--begin::Toolbar-->
				@if(Auth::user()->hasPermissionTo('manage data'))
				<div class="card-toolbar">
					<!--begin::Menu-->
					<button id="menu-edit" class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end hide" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">
						<i class="ki-outline ki-dots-horizontal fs-1 text-gray-500 me-n1"></i>
					</button>
					<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-100px" data-kt-menu="true" style="">
						<!--begin::Menu item-->
						<div class="menu-item">
							<a id="btn-edit" href="#" data-bs-toggle="modal" data-bs-target="#modal-edit-detail" class="menu-link px-3">Edit</a>
							<a id="btn-refresh" class="menu-link px-3 hide">Refresh</a>
						</div>
						<!--end::Menu item-->
					</div>
					<!--begin::Menu 2-->
					<!--end::Menu-->
				</div>
				@endif
				<!--end::Toolbar-->
			</div>
			<!--begin::Card body-->
			<div class="card-body">
				<!--begin::Details toggle-->
				<div id="sidebar-detail-placeholder" class="d-flex h-100 align-items-center justify-content-center">
					<div class="d-flex flex-column fs-6 py-3 align-items-center">
						<img class="w-150px" src="{{asset('img/not-found.png')}}">
						<div class="text-center mt-2">
							<b>Oops.. Belum ada produk yang dipilih</b>
							<p>Silahkan pilih produknya terlebih dahulu dari diagram pohon di samping</p>
						</div>
					</div>
				</div>

				<div id="sidebar-detail-content" class="sidebar-detail-content h-100 hide">
					<div class="sidebar-detail-item w-100">
						<h1 id="sidebar-detail-subheader-name" class="text-primary sidebar-detail-title">Title</h1>
						<div class="d-flex justify-content-between align-items-center">
							<div class="mt-2">
								<span class="text-muted fs-3 fw-bold">Code:</span>
								<span id="sidebar-detail-subheader-code" class="ms-2 text-primary fs-3 fw-bold">Belum ada data</span>
							</div>
							<div id="sidebar-detail-subheader-type" class="badge badge-light-success py-2 px-5 sidebar-detail-type">Produk</div>
						</div>
					</div>
					<div class="sidebar-detail-item w-100">
						<span class="text-primary fs-3 fw-bold">Product Definition:</span>
						<div id="sidebar-detail-item-definition" class="fs-3 text-muted mt-5 sidebar-detail-description">Belum ada data</div>
					</div>
					<div class="sidebar-detail-item w-100">
						<span class="text-primary fs-3 fw-bold">Product Life Cycle Stage:</span>
						<div id="sidebar-detail-item-stage" class="fs-3 text-muted mt-5 sidebar-detail-description">Belum ada data</div>
					</div>
					<div class="sidebar-detail-item w-100">
						<span class="text-primary fs-3 fw-bold">High Level Strategy:</span>
						<div id="sidebar-detail-item-strategy" class="fs-3 text-muted mt-5 sidebar-detail-description">Belum ada data</div>
					</div>
					<div class="sidebar-detail-item w-100">
						<span class="text-primary fs-3 fw-bold">Product Age:</span>
						<div id="sidebar-detail-item-age" class="fs-3 text-muted mt-5 sidebar-detail-description">Belum ada data</div>
					</div>
					<div class="sidebar-detail-item w-100">
						<span class="text-primary fs-3 fw-bold">Plan Enhancement:</span>
						<div id="sidebar-detail-item-plan" class="fs-3 text-muted mt-5 sidebar-detail-description">Belum ada data</div>
					</div>
				</div>

				<!--end::Details content-->
			</div>
			<!--end::Card body-->
		</div>
		<!--end::Card-->
	</div>
	<!--end::Sidebar-detail-->
</div>
<div class="modal fade" id="modal-edit-detail" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script src="{{asset('js/product_life_cycle/index.js?v.0.3')}}"></script>
@endsection