@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