@extends('layouts.app', ['title' => 'Informe Básico de Resultados', 'titleIconClass' => 'file-alt'])
@php
function getReportRecord($talReports, $talentId, $factorId) {
return $talReports->where('tal_talent_id', $talentId)->where('tal_factor_id', $factorId)->first();
}
@endphp
@section('content')
<div class="container px-lg-5">
    <div class="text-center">
        <img src="{{ asset('images/reports/potenciate.png') }}" class="mw-100">
        <p class="display-3 text-default">SÍNTESIS DE RESULTADOS</p>
    </div>

    <div class="border border-dark rounded p-3" style="border-style: dashed !important">
        <div class="row">
            <div class="col-lg-4 pt-2">
                <div class="border-bottom border-default text-center">
                    <h2 class="font-weight-bold">{{$student->first_name}}</h2>
                </div>
                <p class="text-center">NOMBRES</p>
            </div>
            <div class="col-lg-4 pt-2">
                <div class="border-bottom border-default text-center">
                    <h2 class="font-weight-bold">{{$student->last_name}}</h2>
                </div>
                <p class="text-center">APELLIDOS</p>
            </div>
            <div class="col-lg-4 pt-2">
                <div class="border-bottom border-default text-center">
                    <h2 class="font-weight-bold">@date(now())</h2>
                </div>
                <p class="text-center">FECHA DE INFORME</p>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-2 pt-2">
                <div class="border-bottom border-default text-center">
                    <h3 class="font-weight-bold">{{$student->age}} años</h3>
                </div>
                <p class="text-center">EDAD</p>
            </div>
            <div class="col-lg-2 pt-2">
                <div class="border-bottom border-default text-center">
                    <h3 class="font-weight-bold">{{@$student->identificationType->name ?? '-'}}</h3>
                </div>
                <p class="text-center">TIPO D.I.</p>
            </div>
            <div class="col-lg-4 pt-2">
                <div class="border-bottom border-default text-center">
                    <h3 class="font-weight-bold">{{$student->identification}}</h3>
                </div>
                <p class="text-center">NÚMERO</p>
            </div>
            <div class="col-lg-2 pt-2">
                <div class="border-bottom border-default text-center">
                    <h3 class="font-weight-bold">{{$student->grade ?? '-'}}</h3>
                </div>
                <p class="text-center">GRADO</p>
            </div>
            <div class="col-lg-2 pt-2">
                <div class="border-bottom border-default text-center">
                    <h3 class="font-weight-bold">
                        {{$student->sex ?? '-'}}
                        {{-- {!! $student->sex == 'M' ? '<i class="fa fa-mars text-primary"></i>'
                                                 : '<i class="fa fa-venus text-info"></i>'!!} --}}
                    </h3>
                </div>
                <p class="text-center">SEXO</p>
            </div>
        </div>
    </div>

    <div class="text-center mt-2 d-none d-lg-flex justify-content-center align-items-end"
         style="background-image: url('{{ asset('images/reports/pot_titulo.png') }}');
                height: 195px;
                background-position: center;
                background-repeat: no-repeat;" >
        <span class="text-dark text-uppercase h2">{{$potTestResult->developmentLevel->name}}</span>
    </div>

    <div class="text-center mt-2 d-flex d-lg-none justify-content-center align-items-end"
         style="background-image: url('{{ asset('images/reports/pot_titulo_mobile.png') }}');
                height: 219px;
                background-position: center;
                background-repeat: no-repeat;" >
        <span class="text-dark text-uppercase h3">{{$potTestResult->developmentLevel->name}}</span>
    </div>

    <div class="my-3 col-lg-8 mx-auto">

        <h3 class="">
            <span class="text-DARK" style="border-bottom: dashed">DISTRIBUCIÓN DE FACTORES:</span>
        </h3>

        <div class="rounded border-default px-1" style="border-style: dashed">

            <div class="mt-3 col-lg-10 mx-auto">
                <figure>
                    <canvas id="myChart" width="400" height="390"></canvas>
                    <figcaption class="text-center"><small>Fig.1 Puntajes de participantes por factor</small></figcaption>
                </figure>
            </div>

        </div>
    </div>


    @if($talTestResult)

    <div class="text-center mt-5 d-none d-lg-flex justify-content-center align-items-end"
         style="background-image: url('{{ asset('images/reports/tal_titulo.png') }}');
                height: 190px;
                background-position: center;
                background-repeat: no-repeat;
                padding-left: 120px" >
        <span class="text-dark text-uppercase h3">{{$talTestResult->firstTalent->name}}</span>
    </div>

    <div class="text-center mt-5 d-flex d-lg-none justify-content-center align-items-end"
         style="background-image: url('{{ asset('images/reports/tal_titulo_mobile.png') }}');
                height: 139px;
                background-position: center;
                background-repeat: no-repeat;
                padding-left: 80px" " >
        <span class="text-dark text-uppercase h3">{{$potTestResult->developmentLevel->name}}</span>
    </div>

    <div class="text-center">
        <img src="{{ $talTestResult->firstTalent->infographyPath }}" alt="Infografia talento principal" class="mw-100">
        <p class="mt-2">
            <span class="text-dark h3">NIVEL DE DESARROLLO A PROMOVER:</span>
            <span class="rounded border-default px-2 py-1 text-uppercase h3" style="border: 2px dashed">
                {{$talTestResult->developmentLevel[0]->name}}
            </span>
        </p>
    </div>

    <p class="mt-7 text-center">
        <span class="text-dark h3">b. SECUNDARIO:</span>
        <span class="rounded border-default px-2 py-1 text-uppercase h3" style="border: 2px dashed">
            {{$talTestResult->secondTalent->name}}
        </span>
    </p>

    <div class="text-center">
        <img src="{{ $talTestResult->secondtalent->infographyPath }}" alt="Infografia talento secundario" class="mw-100">
        <p class="mt-2">
            <span class="text-dark h3">NIVEL DE DESARROLLO A PROMOVER:</span>
            <span class="rounded border-default px-2 py-1 text-uppercase h3" style="border: 2px dashed">
                {{$talTestResult->developmentLevel[1]->name}}
            </span>
        </p>
    </div>
    @endif

    <div class="text-right mt-6">
        <a class="" href="{{route('admin.tests.reports.extensive', [$student, 'purchaseId' => $purchase->id])}}">
            <img src="{{ asset('images/reports/btn_informe_detallado.png') }}" alt="Botón Ver Informe detallado">
        </a>
    </div>


    <a class="btn btn-secondary mt-5 hide-pdf" href="javascript:history.go(-1)">
        <i class="fa fa-arrow-left"></i> Volver
    </a>

</div>
@endsection
@push('js')
<script>
    const ctx = document.getElementById('myChart');
        const factors = @json($potFactors->pluck('name'));
        const valuesCarer = @json($reportsCarer->pluck('value'));
        const valuesTeacher = @json($reportsTeacher->pluck('value'));
        const valuesStudent = @json($reportsStudent->pluck('value'));
        factors.pop()
        valuesCarer.pop()
        valuesTeacher.pop()
        valuesStudent.pop()

        var myChart = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: factors,
                datasets: [
                    {
                        label: 'Familia',
                        data: valuesCarer,
                        borderColor: '#0faaf0',
                        borderWidth: 3,
                        fill: false
                    },
                    {
                        label: 'Docente',
                        data: valuesTeacher,
                        borderColor: '#2dce89',
                        borderWidth: 3,
                        fill: false

                    },
                    {
                        label: 'Niño/joven',
                        data: valuesStudent,
                        borderColor: '#231969',
                        borderWidth: 3,
                        fill: false

                    },
                ],
            },
            options: {
                tooltips: {
                    enabled: false
                },
                scale: {
                    ticks: {
                        display:false,
                        beginAtZero: true,
                        min: 0,
                    }
                },
            }
        });
</script>
@endpush