@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">Tarif & Pricing</h1>
				<!--end::Title-->
				<!--begin::Breadcrumb-->ser
				<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">Kebijakan</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="card">
	<!--begin::Card body-->
	<div class="card-body">
		<div class="row">
			<div id="col_product" class="col-md-5">
			    <label class="form-label fw-bold">Layanan</label>
			    <select id="product" class="form-select form-select-solid" data-control="select2" data-placeholder="Pilih Layanan">
				    <option></option>
				    @foreach($service as $item)
				    	<option value="{{$item['id']}}" data-code="{{$item['code']}}" data-productid="{{$item['product_id']}}">{{$item['name']}}</option>
				    @endforeach
				</select>
			</div>
			<div id="col_service" class="col-md-3 hide">
			    <label class="form-label fw-bold">Layanan</label>
			    <select id="service" class="form-select form-select-solid" data-control="select2" data-placeholder="Pilih Layanan">
				    <option></option>
				    <option value="1">Layanan Finpay Money</option>
				    <option value="2">Fee QRIS MPM & CPM Persentase MDR On Us</option>
				    <option value="3">Alokasi Fee QRIS MPM & CPM Persentase MDR Off Us</option>
				    <option value="4">Cash In/Cash Out Uang Elektronik</option>
				</select>
			</div>
			<div id="col_competitor" class="col-md-5">
			    <label class="form-label fw-bold">Competitor</label>
			    <select id="competitor" class="form-select form-select-solid" data-control="select2" data-placeholder="Pilih Kompetitor">
				    <option></option>
				</select>
			</div>
			<div class="col-md-2 text-center">
			    <label class="form-label fw-bold">&nbsp;</label>
			    <div class="text-end">
				    <a id="table_mode" class="btn btn-flex btn-primary h-40px fs-7 fw-bold disabled" >
						<i class="ki-duotone ki-abstract-14 fs-1 me-2"><span class="path1"></span><span class="path2"></span></i>View Master Table
					</a>

					<a id="card_mode" class="btn btn-flex btn-primary h-40px fs-7 fw-bold hide" >
						<i class="ki-duotone ki-category fs-1 me-2">
							<span class="path1"></span>
							<span class="path2"></span>
							<span class="path3"></span>
							<span class="path4"></span>
						</i>View Card
					</a>
			    </div>
			</div>
		</div>
	</div>
	<!--end::Card body-->
</div>
<div id="content-header" class="d-flex flex-wrap flex-stack my-10 hide">
	<!--begin::Heading-->
	<h2 id="header-title" class="fs-2 fw-bold my-2">Finnet Product Life Cycle</h2>
	<!--end::Heading-->
	<div id="container_search_card" class="d-flex w-350px gap-3">
		<div class="input-group w-350px">
		    <span class="input-group-text bg-white"><i class="fas fa-search fs-4"></i></span>
		    <input id="dt_card_input_search" type="text" class="form-control border-left-0 ps-1" placeholder="Search" aria-label="Search"/>
		</div>
		<!-- <a class="btn btn-secondary px-2 w-125px text-primary fw-bold">
			<i class="ki-duotone ki-folder-down fs-2 me-2">
				<span class="path1"></span>
				<span class="path2"></span>
			</i>Download
		</a> -->
	</div>
</div>
<div id="container_card">
	<div id="container_card_content" class="row">
		
	</div>

	<div id="container_card_idle" 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 produk dan competitornya terlebih dahulu</p>
		</div>
	</div>

	<div id="container_card_not_found" class="d-flex flex-column fs-6 py-3 align-items-center hide">
		<img class="w-150px" src="{{asset('img/not-found.png')}}">
		<div class="text-center mt-2">
			<b>Oops.. Tidak ada data tersedia</b>
		</div>
	</div>
</div>
<div id="container_card_table" class="hide">
	@include('pricing.finpay_billing.content')
	@include('pricing.finpay_voucher.content')
	@include('pricing.finpay_payment_gateway.content')
	@include('pricing.finpay_remittance.content')
	@include('pricing.finpay_money.content')
</div>


<div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script src="{{asset('js/pricing/index.js?v.0.9')}}"></script>
<script src="{{asset('js/pricing/finpay_billing.js?v.0.9')}}"></script>
<script src="{{asset('js/pricing/finpay_voucher.js?v.0.9')}}"></script>
<script src="{{asset('js/pricing/finpay_payment_gateway.js?v.0.9')}}"></script>
<script src="{{asset('js/pricing/finpay_remittance.js?v.0.9')}}"></script>
<script src="{{asset('js/pricing/finpay_money.js?v.0.9')}}"></script>
<!-- <script src="{{asset('js/pricing/finpay_money_mdr_fee.js?v.0.5')}}"></script>
<script src="{{asset('js/pricing/finpay_money_mdr_distribution_fee.js?v.0.5')}}"></script>
<script src="{{asset('js/pricing/finpay_money_cash_flow.js?v.0.5')}}"></script> -->
@endsection