@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-4">

        {{-- Tombol Kembali --}}
        <div class="card shadow-lg mx-0 mb-4">
            <div class="card-body p-3">
                <div class="d-flex align-items-center gap-2">
                    <button class="btn btn-secondary mb-0" onclick="history.back()">
                        <i class="fas fa-circle-left me-1"></i>
                        <span class="font-weight-bold">Back</span>
                    </button>
                </div>
            </div>
        </div>

        {{-- ═══════════════════ RINGKASAN PER TRAINER ═══════════════════ --}}
        @if (!empty($trainer_summary) && $trainer_summary->count())
            <div class="row mb-4">
                <div class="col-md-4 col-12 mb-md-0 mb-4">
                    <div class="card">
                        <div class="card-header pb-0 text-center">
                            <h6 class="mb-0 text-success">Material</h6>
                        </div>
                        <div class="card-body p-2">
                            <div id="chartMateri" style="height: 300px; width: 100%;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12 mb-md-0 mb-4">
                    <div class="card">
                        <div class="card-header pb-0 text-center">
                            <h6 class="mb-0 text-info">Trainer</h6>
                        </div>
                        <div class="card-body p-2">
                            <div id="chartTrainerAspect" style="height: 300px; width: 100%;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12">
                    <div class="card">
                        <div class="card-header pb-0 text-center">
                            <h6 class="mb-0 text-warning">Facility</h6>
                        </div>
                        <div class="card-body p-2">
                            <div id="chartFasilitas" style="height: 300px; width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header pb-0">
                            <h6 class="mb-0">
                                Rating Summary per Trainer
                            </h6>
                        </div>
                        <div class="card-body px-0 pb-0">
                            <div class="table-responsive">
                                <table class="table align-items-center mb-0" id="summaryTrainer">
                                    <thead style="background-color:#00b7bd1a;">
                                        <tr>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder ps-3">No</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder">Trainer Name</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Total Reviewers</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Avg Material</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Avg Trainer</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Avg Facility</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center">Avg Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($trainer_summary as $i => $s)
                                            @php
                                                $avg = $s['avg_total'];
                                                $badgeClass = match(true) {
                                                    $avg >= 4.5 => 'bg-gradient-success',
                                                    $avg >= 3.5 => 'bg-gradient-info',
                                                    $avg >= 2.5 => 'bg-gradient-warning',
                                                    default     => 'bg-gradient-danger',
                                                };
                                            @endphp
                                            <tr>
                                                <td class="ps-3"><span class="text-secondary text-xs">{{ $i + 1 }}</span></td>
                                                <td>
                                                    <span class="text-sm font-weight-bold">{{ $s['trainer'] }}</span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="badge bg-gradient-secondary">{{ $s['jumlah_reviewer'] }} participants</span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="text-sm">{{ $s['avg_rating_materi'] }}</span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="text-sm">{{ $s['avg_rating_trainer'] }}</span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="text-sm">{{ $s['avg_rating_fasilitas'] }}</span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="badge {{ $badgeClass }}">{{ $s['avg_total'] }} / 5</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- ═══════════════════ DETAIL REVIEW PESERTA ═══════════════════ --}}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <h6 class="mb-0">
                            Participant Review Details
                        </h6>
                    </div>
                    <hr class="horizontal dark mt-2">
                    <div class="card-body px-0 pb-2">
                        <div class="table-responsive px-4">
                            <table class="table align-items-center mb-0 display" id="list_{{ $dmenu }}">
                                @if (!empty($table_result))
                                    <thead class="thead-light" style="background-color:#00b7bd4f;">
                                        <tr>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder">No</th>
                                            @foreach (array_keys((array) $table_result[0]) as $head)
                                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder">{{ $head }}</th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($table_result as $row)
                                            @php $cols = (array) $row; @endphp
                                            <tr>
                                                <td><span class="text-secondary text-xs">{{ $loop->iteration }}</span></td>
                                                @foreach ($cols as $key => $val)
                                                    @php
                                                        $cellClass = '';
                                                        if (in_array($key, ['Material Rating (1-5)', 'Trainer Rating (1-5)', 'Facility Rating (1-5)'])) {
                                                            $cellClass = $val >= 4 ? 'text-success font-weight-bold' : ($val >= 3 ? 'text-warning' : 'text-danger');
                                                        }
                                                    @endphp
                                                    <td class="text-sm font-weight-normal {{ $cellClass }}">{{ $val }}</td>
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    </tbody>
                                @else
                                    <thead><tr><th>Info</th></tr></thead>
                                    <tbody>
                                        <tr><td><code>No data found for the selected filter.</code></td></tr>
                                    </tbody>
                                @endif
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
$(document).ready(function () {
    // DataTable detail
    $('#list_{{ $dmenu }}').DataTable({
        destroy: true,
        language: {
            search: "Search:",
            lengthMenu: "Show _MENU_ entries",
            zeroRecords: "Sorry - No data available",
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
            infoEmpty: "No data",
            infoFiltered: "(filtered from _MAX_ total entries)"
        },
        responsive: true,
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excelHtml5',
                text: '<i class="fas fa-file-excel me-1 text-success"></i> <span class="font-weight-bold">Excel</span>',
                sheetName: 'Report Review Trainer',
                exportOptions: { columns: ':visible' }
            },
            {
                extend: 'pdfHtml5',
                text: '<i class="fas fa-file-pdf me-1 text-danger"></i> <span class="font-weight-bold">PDF</span>',
                orientation: 'landscape',
                pageSize: 'A4',
                exportOptions: { columns: ':visible' }
            },
            {
                extend: 'print',
                text: '<i class="fas fa-print me-1 text-info"></i> <span class="font-weight-bold">Print</span>',
                orientation: 'landscape',
                pageSize: 'A4',
                exportOptions: { columns: ':visible' }
            }
        ]
    });

    // Style tombol DataTable
    $('.dt-button').addClass('btn btn-secondary');
    $('.dt-button').removeClass('dt-button');

    // Cek otorisasi tombol
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rptrn/result.blade.php</b> on line <b>218</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rptrn/result.blade.php</b> on line <b>218</b><br />
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rptrn/result.blade.php</b> on line <b>219</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rptrn/result.blade.php</b> on line <b>219</b><br />
    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rptrn/result.blade.php</b> on line <b>220</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rptrn/result.blade.php</b> on line <b>220</b><br />

    // Init ECharts
    @if(!empty($trainer_summary) && $trainer_summary->count())
        var myChartMateri = echarts.init(document.getElementById('chartMateri'));
        var myChartTrainerAspect = echarts.init(document.getElementById('chartTrainerAspect'));
        var myChartFasilitas = echarts.init(document.getElementById('chartFasilitas'));

        var trainerData = @json($trainer_summary->values());
        
        var categories = trainerData.map(item => item.trainer);
        var avgMateri = trainerData.map(item => item.avg_rating_materi);
        var avgTrainer = trainerData.map(item => item.avg_rating_trainer);
        var avgFasilitas = trainerData.map(item => item.avg_rating_fasilitas);

        var baseOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            grid: {
                left: '5%',
                right: '5%',
                bottom: '5%',
                top: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: categories,
                axisLabel: {
                    interval: 0,
                    rotate: 20,
                    fontSize: 10
                }
            },
            yAxis: {
                type: 'value',
                max: 5,
                splitNumber: 5
            }
        };

        myChartMateri.setOption(Object.assign({}, baseOption, {
            series: [{
                name: 'Material',
                type: 'bar',
                data: avgMateri,
                itemStyle: { color: '#4caf50', borderRadius: [4, 4, 0, 0] },
                label: { show: true, position: 'top', formatter: '{c}' }
            }]
        }));

        myChartTrainerAspect.setOption(Object.assign({}, baseOption, {
            series: [{
                name: 'Trainer',
                type: 'bar',
                data: avgTrainer,
                itemStyle: { color: '#17c1e8', borderRadius: [4, 4, 0, 0] },
                label: { show: true, position: 'top', formatter: '{c}' }
            }]
        }));

        myChartFasilitas.setOption(Object.assign({}, baseOption, {
            series: [{
                name: 'Facility',
                type: 'bar',
                data: avgFasilitas,
                itemStyle: { color: '#fbcf33', borderRadius: [4, 4, 0, 0] },
                label: { show: true, position: 'top', formatter: '{c}' }
            }]
        }));
        
        $(window).on('resize', function(){
            if(myChartMateri) myChartMateri.resize();
            if(myChartTrainerAspect) myChartTrainerAspect.resize();
            if(myChartFasilitas) myChartFasilitas.resize();
        });
    @endif
});
</script>
@endpush