@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>

    {{-- ═══════════════════ SUMMARY STATISTICS ═══════════════════ --}}
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h6 class="text-muted mb-2">Total Training</h6>
                    <h3 class="mb-0">{{ number_format($total_training) }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h6 class="text-muted mb-2">Total Cost</h6>
                    <h3 class="mb-0">Rp {{ number_format($total_cost, 0, ',', '.') }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h6 class="text-muted mb-2">Average Cost</h6>
                    <h3 class="mb-0">Rp {{ number_format($avg_cost, 0, ',', '.') }}</h3>
                </div>
            </div>
        </div>
    </div>

    @if($trainings->count() > 0)

    {{-- ═══════════════════ GRAFIK COST BY TRAINER ═══════════════════ --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card h-100">
                <div class="card-header pb-0">
                    <h6 class="mb-0">Cost by Trainer Chart</h6>
                </div>
                <div class="card-body">
                    <div id="chartTrainerCost" style="height: 400px; width: 100%;"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════ SUMMARY BY TRAINER ═══════════════════ --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card h-100">
                <div class="card-header pb-0">
                    <h6 class="mb-0">Summary by Trainer</h6>
                </div>
                <div class="card-body px-0 pb-0">
                    <div class="table-responsive px-4">
                        <table class="table align-items-center mb-0 display" id="trainerSummaryTable">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th class="text-uppercase text-xs">No</th>
                                    <th class="text-uppercase text-xs">Trainer Name</th>
                                    <th class="text-uppercase text-xs">Total Training</th>
                                    <th class="text-uppercase text-xs">Total Cost</th>
                                    <th class="text-uppercase text-xs">Average Cost</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($trainer_cost_summary as $index => $trainer)
                                <tr>
                                    <td><span class="text-secondary text-xs">{{ $index + 1 }}</span></td>
                                    <td><span class="text-sm font-weight-bold">{{ $trainer->trainer_name }}</span></td>
                                    <td><span class="text-sm">{{ $trainer->total_training }}</span></td>
                                    <td><span class="text-sm">Rp {{ number_format($trainer->total_cost, 0, ',', '.') }}</span></td>
                                    <td><span class="text-sm">Rp {{ number_format($trainer->avg_cost, 0, ',', '.') }}</span></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══════════════════ DETAIL DATA TRAINING COST ═══════════════════ --}}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0">
                    <h6 class="mb-0">Training Cost 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="trainingCostTable">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th class="text-uppercase text-xs">No</th>
                                    <th class="text-uppercase text-xs">Training Name</th>
                                    <th class="text-uppercase text-xs">Trainer Name</th>
                                    <th class="text-uppercase text-xs">Cost</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($trainings as $index => $training)
                                <tr>
                                    <td><span class="text-secondary text-xs">{{ $index + 1 }}</span></td>
                                    <td><span class="text-sm">{{ $training->nama_trn }}</span></td>
                                    <td><span class="text-sm">{{ $training->trainer_name }}</span></td>
                                    <td><span class="text-sm font-weight-bold">Rp {{ number_format($training->biaya, 0, ',', '.') }}</span></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @else
    {{-- No Data Message --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-danger text-center" role="alert">
                <i class="fas fa-exclamation-triangle me-2" style="color: yellow;"></i>
                <strong style="color: white;">Tidak ada data yang sesuai dengan filter yang Anda tentukan</strong>
            </div>
        </div>
    </div>
    @endif

</div>
@endsection

@push('css')
<style>
    .card {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }

    .table-responsive {
        border-radius: 0.375rem;
    }
</style>
@endpush

@push('js')
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
    $(document).ready(function() {
        // DataTable - Training Cost Details
        $('#trainingCostTable').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,
            order: [
                [0, 'asc']
            ], // Sort by No ascending
            dom: 'Bfrtip',
            buttons: [{
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel me-1 text-success"></i> <span class="font-weight-bold">Excel</span>',
                    title: 'Training Cost Report',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf me-1 text-danger"></i> <span class="font-weight-bold">PDF</span>',
                    title: 'Training Cost Report',
                    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>',
                    title: 'Training Cost Report',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    exportOptions: {
                        columns: ':visible'
                    }
                }
            ]
        });

        // DataTable - Trainer Summary
        $('#trainerSummaryTable').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,
            order: [
                [3, 'desc']
            ], // Sort by total cost descending
            dom: 'Bfrtip',
            buttons: [{
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel me-1 text-success"></i> <span class="font-weight-bold">Excel</span>',
                    title: 'Trainer Cost Summary',
                    exportOptions: {
                        columns: ':visible'
                    }
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf me-1 text-danger"></i> <span class="font-weight-bold">PDF</span>',
                    title: 'Trainer Cost Summary',
                    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>',
                    title: 'Trainer Cost Summary',
                    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/rpcost/result.blade.php</b> on line <b>271</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rpcost/result.blade.php</b> on line <b>271</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rpcost/result.blade.php</b> on line <b>272</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rpcost/result.blade.php</b> on line <b>272</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rpcost/result.blade.php</b> on line <b>273</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjtalenta/resources/views/report/rpcost/result.blade.php</b> on line <b>273</b><br />

        // Init ECharts - Cost by Trainer
        @if(!empty($trainer_cost_summary) && count($trainer_cost_summary))
        var chartDom = document.getElementById('chartTrainerCost');
        var myChart = echarts.init(chartDom);
        var trainerData = @json($trainer_cost_summary);

        var trainerNames = trainerData.map(item => item.trainer_name);
        var trainerCosts = trainerData.map(item => parseFloat(item.total_cost));
        var trainerCounts = trainerData.map(item => parseInt(item.total_training));

        // Generate colors
        var colors = trainerData.map((_, index) => {
            const hue = (index * 137.5) % 360; // Golden angle for better color distribution
            return `hsla(${hue}, 70%, 60%, 0.7)`;
        });

        var borderColors = colors.map(color => color.replace('0.7', '1'));

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function(params) {
                    var idx = params[0].dataIndex;
                    var cost = trainerCosts[idx];
                    var count = trainerCounts[idx];
                    return params[0].name + '<br/>' +
                        'Total Cost: Rp ' + cost.toLocaleString('id-ID') + '<br/>' +
                        'Total Training: ' + count;
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: trainerNames,
                axisLabel: {
                    interval: 0,
                    rotate: 45
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: function(value) {
                        return 'Rp ' + value.toLocaleString('id-ID');
                    }
                }
            },
            series: [{
                name: 'Total Cost',
                type: 'bar',
                data: trainerCosts.map((cost, index) => ({
                    value: cost,
                    itemStyle: {
                        color: colors[index],
                        borderColor: borderColors[index],
                        borderWidth: 1
                    }
                })),
                label: {
                    show: true,
                    position: 'top',
                    formatter: function(params) {
                        return 'Rp ' + params.value.toLocaleString('id-ID');
                    }
                }
            }]
        };

        myChart.setOption(option);

        // Resize on window resize
        $(window).on('resize', function() {
            if (typeof myChart !== 'undefined' && myChart != null) myChart.resize();
        });
        @endif
    });
</script>
@endpush