{{-- analysis/roses.blade.php --}}
{{-- Rose / Radar chart for cotation profiles --}}
{{-- Legacy: show_table_StudyQuery_roses() --}}
@extends('layouts.app')

@section('content')
@include('components.analysis-nav', ['activeTab' => 'roses'])
@include('components.analysis-filter', ['formAction' => route('kms.study.roses', $study->Id)])

<TR>
    <TD COLSPAN=32>
        {{-- Chinese type selector --}}
        <FORM METHOD="GET" ACTION="{{ route('kms.study.roses', $study->Id) }}">
            <SELECT NAME="chinese_type" onchange="this.form.submit()">
                <OPTION VALUE="">-- Tous types --</OPTION>
                @foreach(\App\Enums\ChineseType::cases() as $ct)
                    <OPTION VALUE="{{ $ct->value }}" {{ ($chineseType ?? '') === $ct->value ? 'selected' : '' }}>{{ $ct->label() }}</OPTION>
                @endforeach
            </SELECT>
        </FORM>
        <BR>

        {{-- Data table --}}
        <TABLE WIDTH=100% BORDER=1 CELLPADDING=3 CELLSPACING=0>
            <TR CLASS="TR1">
                <TH ALIGN=LEFT>Produit</TH>
                <TH>N</TH>
                @foreach($roseData['labels'] as $label)
                    <TH>{{ $label }}</TH>
                @endforeach
            </TR>

            @foreach($roseData['products'] as $prodId => $data)
                @include('components.row', ['index' => $loop->index])
                    <TH ALIGN=LEFT NOWRAP>{{ $products[$prodId]['Name'] ?? "Produit {$prodId}" }}</TH>
                    <TD ALIGN=RIGHT>{{ $data['n'] }}</TD>
                    @foreach($data['values'] as $val)
                        <TD ALIGN=RIGHT>{{ $val }}%</TD>
                    @endforeach
                </TR>

                {{-- Norme row if available --}}
                @if($data['norme_values'])
                    <TR CLASS="TR2" style="font-style:italic;">
                        <TH ALIGN=LEFT NOWRAP>&nbsp;&nbsp;Norme</TH>
                        <TD>&nbsp;</TD>
                        @foreach($data['norme_values'] as $nv)
                            <TD ALIGN=RIGHT>{{ $nv }}%</TD>
                        @endforeach
                    </TR>
                @endif
            @endforeach
        </TABLE>

        {{-- Chart.js Radar Charts --}}
        @foreach($roseData['products'] as $prodId => $data)
            <DIV style="max-width:500px; margin:20px auto;">
                <CANVAS id="roseChart{{ $prodId }}" width="400" height="400"></CANVAS>
            </DIV>
        @endforeach
    </TD>
</TR>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const labels = @json($roseData['labels']);

    @foreach($roseData['products'] as $prodId => $data)
    (function() {
        const ctx = document.getElementById('roseChart{{ $prodId }}').getContext('2d');
        const datasets = [{
            label: '{{ $products[$prodId]["Name"] ?? "Produit ".$prodId }}',
            data: @json($data['values']),
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 2,
            pointRadius: 3,
        }];

        @if($data['norme_values'])
        datasets.push({
            label: 'Norme',
            data: @json($data['norme_values']),
            backgroundColor: 'rgba(255, 99, 132, 0.1)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1,
            borderDash: [5, 5],
            pointRadius: 2,
        });
        @endif

        new Chart(ctx, {
            type: 'radar',
            data: { labels: labels, datasets: datasets },
            options: {
                scales: {
                    r: {
                        beginAtZero: true,
                        max: 100,
                        ticks: { stepSize: 20 }
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        text: '{{ $products[$prodId]["Name"] ?? "Produit ".$prodId }}'
                    }
                }
            }
        });
    })();
    @endforeach
});
</script>
@endpush
@endsection