286 lines
17 KiB
PHP
286 lines
17 KiB
PHP
@extends('student.layouts.app')
|
|
@section('title', 'Hasil Tes Potensi Karier | Career Development and Consultation (CDC)')
|
|
@section('header')
|
|
<div class="py-5 toolbar py-lg-5" id="kt_toolbar">
|
|
<div id="kt_toolbar_container" class="flex-wrap container-xxl d-flex flex-stack">
|
|
<div class="page-title d-flex flex-column me-3">
|
|
<h1 class="my-1 d-flex text-dark fw-bolder fs-3">Tes Potensi Karier</h1>
|
|
<ul class="my-1 text-gray-600 breadcrumb breadcrumb-dot fw-bold fs-7">
|
|
<li class="text-gray-600 breadcrumb-item">
|
|
<a href="#" class="text-gray-600 text-hover-primary">Dashboard</a>
|
|
</li>
|
|
<li class="text-gray-600 breadcrumb-item">
|
|
<a href="#" class="text-gray-600 text-hover-primary">Tes Potensi Karier</a>
|
|
</li>
|
|
<li class="text-gray-600 breadcrumb-item">Hasil</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@section('content')
|
|
<div class="mb-4 row g-6 g-xl-9">
|
|
<div class="col-lg-12">
|
|
<div class="border border-dashed rounded card card-flush h-lg-100 border-success notice bg-light-success">
|
|
<div class="mt-4 card-header">
|
|
<div class="card-title flex-column">
|
|
<h3 class="mb-0">Hasil Tes Potensi Karier</h3>
|
|
{{-- <div class="text-gray-400 fs-6 fw-bold">Di bawah ini adalah hasil akhir dari tes yang telah
|
|
dikerjakan</div> --}}
|
|
</div>
|
|
<div class="card-toolbar">
|
|
<a href="{{ route('student.quest.history') }}" class="btn btn-light-info btn-sm">Riwayat</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-5 card-body p-9">
|
|
<div class="flex-wrap d-flex">
|
|
<div
|
|
class="mx-auto position-relative d-flex flex-center h-175px w-175px me-15 mb-7 sm:position-absolute">
|
|
<div class="position-absolute translate-middle start-50 top-50 d-flex flex-column flex-center">
|
|
<span class="fs-2qx fw-bolder">{{ count($personalityNames) }}</span>
|
|
<span class="text-gray-700 fs-6 fw-bold">Personality</span>
|
|
</div>
|
|
<canvas id="project_overview_chart"></canvas>
|
|
</div>
|
|
<div class="mb-5 d-flex flex-column justify-content-center flex-row-fluid">
|
|
@foreach ($personalityNames as $key => $personalityName)
|
|
<div class="mb-3 d-flex fs-5 fw-bold align-items-center">
|
|
<div class="bullet bg-info me-3"></div>
|
|
<div class="text-gray-700">{{ $personalityName }}</div>
|
|
<div class="text-gray-700 ms-auto fw-bolder">{{ $personalityValues[$key] }} %</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="my-2 border border-dashed border-success">
|
|
</hr>
|
|
<div class="mt-2 card-header card-header-stretch d-flex align-items-center justify-content-between">
|
|
<h3 class="mb-0 card-title">Deskripsi Kepribadian</h3>
|
|
<div class="card-toolbar">
|
|
<ul class="border-0 nav nav-tabs nav-line-tabs nav-stretch fs-6">
|
|
@foreach ($result->personality as $index => $resultTitle)
|
|
<li class="nav-item">
|
|
<a class="nav-link text-gray-800 {{ $loop->first ? 'active' : '' }} "
|
|
data-bs-toggle="tab"
|
|
href="#tab_{{ $index + 1 }}">{{ $resultTitle->personality }}</a>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="tab-content" id="myTabContent">
|
|
@foreach ($result->personality as $index => $result)
|
|
<div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="tab_{{ $index + 1 }}"
|
|
role="tabpanel">
|
|
<!--begin::Hero card-->
|
|
<!--begin::Hero body-->
|
|
<div class="p-5 flex-column">
|
|
<!--begin::Hero content-->
|
|
<div class="container p-5">
|
|
<div class="row align-items-center h-lg-300px">
|
|
<!--begin::Wrapper-->
|
|
<div
|
|
class="order-1 col-12 col-lg-4 d-flex justify-content-center align-items-end">
|
|
<!--begin::Illustration-->
|
|
<img src="{{ $result->image_url ? asset('storage/illustrations/' . $result->image_url) : asset('assets/archive/images/default.png') }}"
|
|
alt="Illustration" class="mw-100 mh-150px mh-lg-275px mb-lg-2" />
|
|
<!--end::Illustration-->
|
|
</div>
|
|
<!--end::Wrapper-->
|
|
<!--begin::Wrapper-->
|
|
<div
|
|
class="order-2 col-12 col-lg-7 d-flex flex-column align-items-center align-items-lg-start justify-content-center">
|
|
<!--begin::Title-->
|
|
<h1
|
|
class="mb-5 text-center text-gray-800 fw-bolder fs-2 fs-lg-1 mb-lg-4 text-lg-start">
|
|
{{ $result->personality }}</h1>
|
|
<!--end::Title-->
|
|
<p class="text-gray-700 fs-5">{!! $result->desc !!}</p>
|
|
</div>
|
|
|
|
|
|
<!--end::Wrapper-->
|
|
</div>
|
|
</div>
|
|
<!--end::Hero content-->
|
|
</div>
|
|
<!--end::Hero body-->
|
|
<!--end::Hero card-->
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<hr class="my-2 border border-dashed border-success">
|
|
</hr>
|
|
<div class="mt-2 card-header card-header-stretch d-flex align-items-center justify-content-between">
|
|
<h3 class="mb-0 card-title">Potensi Karier</h3>
|
|
<div class="card-toolbar">
|
|
<ul class="border-0 nav nav-tabs nav-line-tabs nav-stretch fs-6">
|
|
@forelse ($potentialCareers as $index => $potentialCareerTitle)
|
|
<li class="nav-item">
|
|
<a class="nav-link text-gray-800 {{ $loop->first ? 'active' : '' }} "
|
|
data-bs-toggle="tab"
|
|
href="#career_{{ $index + 1 }}">{{ $potentialCareerTitle->career_title }}</a>
|
|
</li>
|
|
@empty
|
|
<li class="nav-item">
|
|
<a class="text-gray-800 nav-link" data-bs-toggle="tab" href="#"tab_1>Potensi
|
|
Karier</a>
|
|
</li>
|
|
@endforelse
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="tab-content" id="myTabContent">
|
|
@forelse ($potentialCareers as $index => $potentialCareer)
|
|
<div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
|
|
id="career_{{ $index + 1 }}" role="tabpanel">
|
|
<!--begin::Hero card-->
|
|
<!--begin::Hero body-->
|
|
<div class="p-5 flex-column">
|
|
<!--begin::Hero content-->
|
|
<div class="container p-5">
|
|
<div class="row align-items-center h-lg-300px">
|
|
<!--begin::Wrapper-->
|
|
<div
|
|
class="order-1 col-12 col-lg-4 d-flex justify-content-center align-items-end">
|
|
<!--begin::Illustration-->
|
|
<img src="{{ $potentialCareer->image_url ? asset('storage/illustrations/' . $potentialCareer->image_url) : asset('assets/archive/images/default.png') }}"
|
|
alt="Illustration" class="mw-100 mh-150px mh-lg-275px mb-lg-2" />
|
|
<!--end::Illustration-->
|
|
</div>
|
|
<!--end::Wrapper-->
|
|
<!--begin::Wrapper-->
|
|
<div
|
|
class="order-2 col-12 col-lg-7 d-flex flex-column align-items-center align-items-lg-start justify-content-center">
|
|
<!--begin::Title-->
|
|
<h1
|
|
class="mb-5 text-center text-gray-800 fw-bolder fs-2 fs-lg-1 mb-lg-4 text-lg-start">
|
|
{{ $potentialCareer->career_title }} <span
|
|
class="badge badge-light-info">
|
|
{{ $potentialCareer->is_specific === 1 ? 'Karier Spesifik' : 'Karier Umum' }}
|
|
</span></h1>
|
|
<!--end::Title-->
|
|
<p class="text-gray-700 fs-5">{!! $potentialCareer->career_description !!}</p>
|
|
</div>
|
|
<!--end::Wrapper-->
|
|
</div>
|
|
</div>
|
|
<!--end::Hero content-->
|
|
</div>
|
|
<!--end::Hero body-->
|
|
<!--end::Hero card-->
|
|
</div>
|
|
@empty
|
|
<div class="tab-pane fade show active" id="tab_1" role="tabpanel">
|
|
<div class="p-5 flex-column">
|
|
<div class="container p-5">
|
|
<div class="row align-items-center h-lg-300px">
|
|
<div
|
|
class="order-1 col-12 col-lg-4 d-flex justify-content-center align-items-end">
|
|
<img src="{{ asset('assets/archive/businessman.png') }}" alt=""
|
|
class="mw-100 mh-150px mh-lg-275px mb-lg-2" />
|
|
</div>
|
|
<div
|
|
class="order-2 col-12 col-lg-7 d-flex flex-column align-items-center align-items-lg-start justify-content-center">
|
|
<h1
|
|
class="mb-5 text-center text-gray-800 fw-bolder fs-2 fs-lg-1 mb-lg-4 text-lg-start">
|
|
Potensi Karier</h1>
|
|
<p class="text-gray-700 fs-5">Data potensi karir saat ini tidak tersedia.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@push('scripts')
|
|
<script>
|
|
var KTProjectOverview = (function() {
|
|
var t = KTUtil.getCssVariableValue("--bs-primary"),
|
|
e = KTUtil.getCssVariableValue("--bs-light-primary"),
|
|
a = KTUtil.getCssVariableValue("--bs-success"),
|
|
r = KTUtil.getCssVariableValue("--bs-light-success"),
|
|
o = KTUtil.getCssVariableValue("--bs-gray-200"),
|
|
n = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
return {
|
|
init: function() {
|
|
var s, i;
|
|
!(function() {
|
|
var t = document.getElementById("project_overview_chart");
|
|
if (t) {
|
|
var e = t.getContext("2d");
|
|
new Chart(e, {
|
|
type: "doughnut",
|
|
data: {
|
|
datasets: [{
|
|
data: @json($personalityValues),
|
|
backgroundColor: [
|
|
"#00A3FF",
|
|
"#50CD89",
|
|
"#ff8458",
|
|
"#22d3ee",
|
|
"#7239EA",
|
|
"#f87171",
|
|
],
|
|
}, ],
|
|
labels: @json($personalityNames),
|
|
},
|
|
options: {
|
|
chart: {
|
|
fontFamily: "inherit"
|
|
},
|
|
cutoutPercentage: 75,
|
|
responsive: !0,
|
|
maintainAspectRatio: !1,
|
|
cutout: "75%",
|
|
title: {
|
|
display: !1
|
|
},
|
|
animation: {
|
|
animateScale: !0,
|
|
animateRotate: !0
|
|
},
|
|
tooltips: {
|
|
enabled: !0,
|
|
intersect: !1,
|
|
mode: "nearest",
|
|
bodySpacing: 5,
|
|
yPadding: 10,
|
|
xPadding: 10,
|
|
caretPadding: 0,
|
|
displayColors: !1,
|
|
backgroundColor: "#20D489",
|
|
titleFontColor: "#ffffff",
|
|
cornerRadius: 4,
|
|
footerSpacing: 0,
|
|
titleSpacing: 0,
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: !1
|
|
}
|
|
},
|
|
},
|
|
});
|
|
}
|
|
})();
|
|
},
|
|
};
|
|
})();
|
|
KTUtil.onDOMContentLoaded(function() {
|
|
KTProjectOverview.init();
|
|
});
|
|
</script>
|
|
@endpush
|