@extends('_layout.app')
@section('css')

<style>
    /* Add padding to the bottom of the legend */
    .amcharts-Legend {
      padding-bottom: 20px; /* Adjust the value as needed */
    }
  </style>@endsection

@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">Industry Movement</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">Customer 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 hide">
	<!--begin::Card body-->
	<div class="card-body">
		<div class="d-flex flex-stack mb-5">
			<h1 class="text-primary">Focus Group Discussion</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_focus_group_discussion" type="text" class="form-control border-left-0 ps-1" placeholder="Search" aria-label="Search"/>
				</div>
				@if(Auth::user()->hasPermissionTo('manage data'))
				<a href="{{url('/customer-research/focus-group-discussion/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
				<a id="btn_refresh_focus_group_discussion" 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 class="table-responsive">
        <table id="table_list_focus_group_discussion" 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>Topik FGD</th>
                    <th>Status</th>
                    <th>Focus Group Result</th>
                    <th>Action Plan</th>
                    <th>Due Date</th>
                    <th>PIC</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
	</div>
	<!--end::Card body-->
</div>

<div id="card_voice_of_customer_wrapper">
	<div class="d-flex flex-wrap flex-stack my-5">
		<!--begin::Heading-->
		<h1 id="section_title_voice_of_customer" class="fs-2 fw-bold my-2">Voice of Customer</h1>
		<!--end::Heading-->
		<div class="d-flex">
			<div class="input-group w-250px me-5">
			    <span class="input-group-text bg-white"><i class="fas fa-search fs-4"></i></span>
			    <input id="dt_input_search_voice_of_customer" type="text" class="form-control border-left-0 ps-2" placeholder="Search" aria-label="Search"/>
			</div>
			@if(Auth::user()->hasPermissionTo('manage data'))
			<a id="add_card_voice_of_customer" href="{{url('/customer-research/focus-group-discussion/voc/modal-add/')}}" data-bs-toggle="modal" data-bs-target="#modal-container" class="btn btn-flex btn-primary h-40px fs-7 fw-bold" >
				<i class="ki-duotone ki-plus fs-1 me-2"></i>Tambah
			</a>
			@endif
			<a id="btn_refresh_voice_of_customer" 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="card_voice_of_customer_empty_data" 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 id="card_voice_of_customer_content_wrapper" class="row hide">

		<div id="card_voice_of_customer_{number}" class="col-md-12 mb-10">
			<div class="card">
				<div class="card-header bg-primary">
					<h3 class="card-title flex-column">
						<span class="card-label fw-bold text-white fs-1">{product}</span>
						<span class="card-label fw-bold text-white fs-5">{period}</span>
					</h3>
					@if(Auth::user()->hasPermissionTo('manage data'))
					<div class="card-toolbar" bis_skin_checked="1">
	           			<div id="sidebar-detail-subheader-type" class="badge badge-success text-white py-2 px-5 sidebar-detail-type">{company}</div>
						<button id="menu-edit" class="btn btn-icon btn-color-gray-500 btn-active-color-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">
							<i class="ki-outline ki-dots-vertical fs-1 text-white 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="">
							<div class="menu-item">
								<a id="btn-edit" href="{{url('/customer-research/focus-group-discussion/voc/modal-edit/')}}/{id}" data-bs-toggle="modal" data-bs-target="#modal-container" class="menu-link px-3">Edit</a>
								<a id="btn-delete" data-id="{id}" class="menu-link px-3 delete-voice-of-customer">Delete</a>
							</div>
						</div>
					</div>
					@endif
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-4 my-2">
							<div class="alert alert-dismissible bg-light-secondary border-light-dark border-dashed d-flex flex-column flex-sm-row p-5">
							    <div class="d-flex flex-column">
							      <span class="fw-bold fs-4">Pain</span>
						    		<div class="text-preline mt-2 fs-4 fw-bold h-200px scroll">{pain}</div>
							    </div>
							</div>
						</div>
						<div class="col-md-4 my-2">
							<div class="alert alert-dismissible bg-light-secondary border-light-dark border-dashed d-flex flex-column flex-sm-row p-5">
							    <div class="d-flex flex-column">
							      <span class="fw-bold fs-4">Need & Want Improvement</span>
						    		<div class="text-preline mt-2 fs-4 fw-bold h-200px scroll">{need_want_improvement}</div>
							    </div>
							</div>
						</div>
						<div class="col-md-4 my-2">
							<div class="alert alert-dismissible bg-light-secondary border-light-dark border-dashed d-flex flex-column flex-sm-row p-5">
							    <div class="d-flex flex-column">
							      <span class="fw-bold fs-4">Opportunities</span>
						    		<div class="text-preline mt-2 fs-4 fw-bold h-200px scroll">{opportunities}</div>
							    </div>
							</div>
						</div>
					</div>
				</div>
			</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/focus_group_discussion/index.js?v.0.2')}}"></script>
@endsection