@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">Potential Market</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">Market Research</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">Market Research</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">Product</label>
			    <select id="product" class="form-select form-select-solid" 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>
			<div id="col_segment" class="col-md-5">
			    <label class="form-label fw-bold">Segment</label>
			    <select id="segment" class="form-select form-select-solid" data-control="select2" data-placeholder="Pilih Segment">
				    <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 mt-10 mb-5 hide">
	<!--begin::Heading-->
	<h2 id="header-title" class="fs-2 fw-bold my-2">Finpay Billing</h2>
	<!--end::Heading-->
	<div id="container_button" class="d-flex w-450px gap-3 justify-content-end">
		<!-- <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> -->
		@if(Auth::user()->hasPermissionTo('manage data'))
		<a id="upload" href="{{url('/market-research/potential-market/modal-upload')}}" data-bs-toggle="modal" data-bs-target="#modal-container" class="btn btn-flex btn-secondary h-40px fs-7 fw-bold text-primary me-3" >
			<i class="ki-duotone ki-folder-up  fs-1 me-"><span class="path1"></span><span class="path2"></span></i>Upload
		</a>
		@endif


		<a id="btn_refresh" class="btn btn-flex btn-warning h-40px fs-7 fw-bold hide" >
			<i class="ki-duotone ki-arrows-circle fs-1 me-2"><span class="path1"></span><span class="path2"></span></i>Refresh
		</a>
	</div>
</div>
<div id="container_card">
	<div id="template" class="row hide">
		<div class="col-md-6 mb-5">
			<div class="card">
				<div class="card-header bg-primary">
					<div class="d-flex flex-column justify-content-center">
			        	<h3 class="card-title text-white m-0">{partner}{brand}</h3>
					</div>
			        <div class="card-toolbar">
			            <div id="sidebar-detail-subheader-type" class="badge badge-success text-white py-2 px-5 sidebar-detail-type">{segment}</div>
			        </div>
			    </div>
				<!--begin::Card body-->
				<div class="card-body">
					<div class="row">
						<div class="col-md-6">
							<div class="d-flex align-items-center">
								<div class="symbol symbol-50px me-5">
									<span class="symbol-label bg-secondary">
										<i class="ki-duotone ki-dribbble fs-1">
											<span class="path1"></span>
										 	<span class="path2"></span>
										 	<span class="path3"></span>
										 	<span class="path4"></span>
										 	<span class="path5"></span>
										 	<span class="path6"></span>
										</i>
									</span>
								</div>
								<div class="d-flex align-items-center flex-stack flex-wrap d-grid gap-1 flex-row-fluid">
									<div class="me-5">
										<a {website_link} class="fs-6 fw-bold text-dark d-block mw-250px text-elipsis">{website}</a>
										<span class="d-block fs-6 fw-bold text-muted">Link Website</span>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
						    <div class="d-flex align-items-center">
								<div class="symbol symbol-50px me-5">
									<span class="symbol-label bg-secondary">
										<i class="ki-duotone ki-abstract-26 fs-1">
											<span class="path1"></span>
										 	<span class="path2"></span>
										</i>
									</span>
								</div>
								<div class="d-flex align-items-center flex-stack flex-wrap d-grid gap-1 flex-row-fluid">
									<div class="me-5">
										<span class="fs-6 fw-bold text-dark d-block mw-250px text-elipsis">{app_name}</span>
										<span class="d-block fs-6 fw-bold text-muted">Nama Apps</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row mt-5">
						<div class="col-md-6">
							<div class="d-flex align-items-center">
								<div class="symbol symbol-50px me-5">
									<span class="symbol-label bg-secondary">
										<i class="ki-duotone ki-tablet fs-1">
											<span class="path1"></span>
										 	<span class="path2"></span>
										 	<span class="path3"></span>
										</i>
									</span>
								</div>
								<div class="d-flex align-items-center flex-stack flex-wrap d-grid gap-1 flex-row-fluid">
									<div class="me-5">
										<span class="fs-6 fw-bold text-dark d-block mw-250px text-elipsis">{phone_number}</span>
										<span class="d-block fs-6 fw-bold text-muted">Nomor Telepon</span>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
						    <div class="d-flex align-items-center">
								<div class="symbol symbol-50px me-5">
									<span class="symbol-label bg-secondary">
										<i class="ki-duotone ki-sms fs-1">
											<span class="path1"></span>
										 	<span class="path2"></span>
										</i>
									</span>
								</div>
								<div class="d-flex align-items-center flex-stack flex-wrap d-grid gap-1 flex-row-fluid">
									<div class="me-5">
										<span class="fs-6 fw-bold text-dark d-block mw-250px text-elipsis">{email}</span>
										<span class="d-block fs-6 fw-bold text-muted">Email</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row mt-5">
						<div class="col-md-6">
							<div class="d-flex align-items-center">
								<div class="symbol symbol-50px me-5">
									<span class="symbol-label bg-secondary">
										<i class="ki-duotone ki-credit-cart fs-1">
											<span class="path1"></span>
										 	<span class="path2"></span>
										</i>
									</span>
								</div>
								<div class="d-flex align-items-center flex-stack flex-wrap d-grid gap-1 flex-row-fluid">
									<div class="me-5">
										<span class="fs-6 fw-bold text-dark d-block mw-250px text-elipsis">{online_transaction}</span>
										<span class="d-block fs-6 fw-bold text-muted">Transaksi Online</span>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
						    <div class="d-flex align-items-center">
								<div class="symbol symbol-50px me-5">
									<span class="symbol-label bg-secondary">
										<i class="ki-duotone ki-user-tick fs-1">
											<span class="path1"></span>
										 	<span class="path2"></span>
										 	<span class="path3"></span>
										 	<span class="path4"></span>
										</i>
									</span>
								</div>
								<div class="d-flex align-items-center flex-stack flex-wrap d-grid gap-1 flex-row-fluid">
									<div class="me-5">
										<span class="fs-6 fw-bold text-dark d-block mw-250px text-elipsis">{competitor_name}</span>
										<span class="d-block fs-6 fw-bold text-muted">Nama Kompetitor</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row mt-5">
						<div class="col-md-6">
							<div class="d-flex align-items-center">
								<div class="symbol symbol-50px me-5">
									<span class="symbol-label bg-secondary">
										<i class="ki-duotone ki-dribbble fs-1">
											<span class="path1"></span>
										 	<span class="path2"></span>
										 	<span class="path3"></span>
										 	<span class="path4"></span>
										 	<span class="path5"></span>
										 	<span class="path6"></span>
										</i>
									</span>
								</div>
								<div class="d-flex align-items-center flex-stack flex-wrap d-grid gap-1 flex-row-fluid">
									<div class="me-5">
										<a {source_link} class="fs-6 fw-bold text-dark d-block mw-250px text-elipsis">{source}</a>
										<span class="d-block fs-6 fw-bold text-muted">Source</span>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
						    <div class="d-flex align-items-center">
								<div class="symbol symbol-50px me-5">
									<span class="symbol-label bg-secondary">
										<i class="ki-duotone ki-profile-user fs-1">
											<span class="path1"></span>
										 	<span class="path2"></span>
										 	<span class="path3"></span>
										 	<span class="path4"></span>
										</i>
									</span>
								</div>
								<div class="d-flex align-items-center flex-stack flex-wrap d-grid gap-1 flex-row-fluid">
									<div class="me-5">
										<span class="fs-6 fw-bold text-dark d-block mw-250px text-elipsis">{estimation_customer}</span>
										<span class="d-block fs-6 fw-bold text-muted">Estimasi Jumlah Pelanggan</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--end::Card body-->
			</div>
		</div>
	</div>

	<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 segment 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">
	<div class="card">
		<!--begin::Card body-->
		<div class="card-body">
			<div class="d-flex flex-stack mb-5">
				<h1 id="table_title" class="text-primary">Telco</h1>
                <div class="d-flex align-items-center position-relative my-1">
                    
                    <div class="input-group input-group-solid w-250px me-5">
					    <span class="input-group-text"><i class="fas fa-search fs-4"></i></span>
					    <input id="dt_input_search_potential_market" type="text" class="form-control border-left-0 ps-1" placeholder="Search" aria-label="Search"/>
					</div>
					@if(Auth::user()->hasPermissionTo('manage data'))
					<a id="btn_add_potential_market" href="{{url('/market-research/potential-market/modal-add')}}" data-bs-toggle="modal" data-bs-target="#modal-container" class="btn btn-primary px-2 w-125px fw-bold">
						<i class="ki-duotone ki-plus fs-2"></i>Tambah
					</a>
					@endif
                </div>
            </div>

            <div class="table-responsive">
                <table id="table_list_potential_market" class="table table-row-bordered table-row-gray-300 gy-2">
                    <thead>
                        <tr class="fw-bold fs-6 text-gray-800">
                            <th>Action</th>
                        	<th>Product</th>
                        	<th>Brand</th>
                            <th>Segment</th>
                            <th>Nama Mitra</th>
                            <th>Link Website</th>
                            <th>Nama Apps</th>
                            <th>Nomor Telepon</th>
                            <th>Email</th>
                            <th>Transaksi Online</th>
                            <th>Kompetitor</th>
                            <th>Source</th>
                            <th>Estimasi Jumlah Pelanggan</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
		</div>
	</div>
</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/potential_market/index.js?v.0.5')}}"></script>
@endsection