@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card mb-3">
                        <div class="card-header">
                            <h5 class="mb-0">Result {{ $title_menu }}</h5>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper row">
                                    <div class="col">
                                        {{-- button back --}}
                                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i
                                                class="fas fa-circle-left me-1"> </i><span
                                                class="font-weight-bold">Kembali</button>
                                    </div>
                                    <div class="col-md-3 md-auto justify-content-end row">


                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    {{-- check result data --}}
                                    @if ($table_result)
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th>No</th>
                                                <th>Periode</th>
                                                <th>Departemen</th>
                                                <th>Qty</th>
                                                <th>Satuan</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $no = 1;
                                            @endphp
                                            @foreach ($table_result_dept as $dt)
                                                <tr>
                                                    <td>{{ $no++ }}</td>
                                                    <td>{{ $dt->periode }}</td>
                                                    <td>{{ $dt->nama_departemen }}</td>
                                                    <td>{{ $dt->qty_total }}</td>
                                                    <td>PCS</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    @endif
                                </table>
                            </div>
                        </div>
                        <hr>
                        <div class="row px-4 py-2">
                            <div id="chartSeragamPerDept" style="width: 100%; height: 400px;"></div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Detail Result Data Seragam Per Departemen</h5>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper row">

                                    <div class="col-md-3 md-auto justify-content-end row">
                                        <div class="col">

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2 mb-3">
                            <div class="table-responsive">
                                <table class="table display" id="list_detail">
                                    {{-- check result data --}}
                                    @if ($table_result)
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th class="align-middle text-start">No</th>
                                                <th class="align-middle text-start">Periode</th>
                                                <th class="align-middle text-start">Department</th>
                                                <th class="align-middle text-start">Deskripsi Seragam</th>
                                                <th class="align-middle text-end">Qty</th>
                                                <th class="align-middle text-start">Satuan</th>
                                                <th class="align-middle text-start">Supplier</th>
                                            </tr>

                                        </thead>

                                        <tbody>
                                            @foreach ($table_result as $i => $row)
                                                <tr>
                                                    <td>{{ $i + 1 }}</td>
                                                    <td>{{ $row->periode }}</td>
                                                    <td>{{ $row->nama_departemen }}</td>
                                                    <td>{{ $row->tipe_seragam }}</td>
                                                    <td class="text-end">{{ $row->qty_total }}</td>
                                                    <td>PCS</td>
                                                    <td>{{ $row->nama_vendor }}</td>

                                                </tr>
                                            @endforeach
                                        </tbody>
                                    @endif
                                </table>
                            </div>
                        </div>
                        <hr>
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div id="detailChartSeragamPerDept" style="width: 100%; height: 400px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script>
        $(document).ready(function() {
            const rawData = {!! json_encode($table_result_dept) !!};

            // Dapatkan daftar unik Departemen dan Periode
            const departemens = [...new Set(rawData.map(item => item.nama_departemen))];
            const periodes = [...new Set(rawData.map(item => item.periode))];

            // Proses jadi series
            const seriesData = periodes.map(periode => {
                const dataPerDept = departemens.map(dept => {
                    const found = rawData.find(item => item.periode == periode && item
                        .nama_departemen == dept);
                    return found ? parseInt(found.qty_total) : 0;
                });

                return {
                    name: periode,
                    type: 'bar',
                    stack: 'Total',
                    emphasis: {
                        focus: 'series'
                    },
                    data: dataPerDept
                };
            });

            // ECharts
            let chartDom = document.getElementById('chartSeragamPerDept');
            let myChart = echarts.init(chartDom);

            let option = {
                title: {
                    text: 'Statistik Data Seragam per Departemen',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    top: 30
                },
                xAxis: {
                    type: 'category',
                    data: departemens
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1
                },
                series: seriesData,
                tooltip: {
                    trigger: 'item',
                    axisPointer: {
                        type: 'shadow'
                    },
                    fformatter: function(params) {
                        return `${params.name} ${params.seriesName} : ${params.value} PCS`;
                    }
                },
            };

            myChart.setOption(option);
        });

        // chart detail result
        const rawData = {!! json_encode($table_result) !!};

        // 1. Ambil semua Tipe Seragam
        const tipeSeragam = [...new Set(rawData.map(item => item.tipe_seragam))];

        // 2. Ambil semua kombinasi Periode + Departemen
        const combinedKeys = [...new Set(rawData.map(item => `${item.periode} - ${item.nama_departemen}`))];

        // 3. Buat series per Periode-Departemen
        const seriesData = combinedKeys.map(key => {
            const [periode, dept] = key.split(' - ');

            const dataPerTipe = tipeSeragam.map(tipe => {
                const foundItems = rawData.filter(item =>
                    item.periode === periode &&
                    item.nama_departemen === dept &&
                    item.tipe_seragam === tipe
                );

                const totalQty = foundItems.reduce((sum, item) => sum + parseInt(item.qty_total || 0), 0);
                return totalQty;
            });

            return {
                name: key,
                type: 'bar',
                data: dataPerTipe
            };
        });

        let chartDom = document.getElementById('detailChartSeragamPerDept');
        let myChart = echarts.init(chartDom);

        let option = {
            title: {
                text: 'Statistik Data Seragam per Periode & Dept',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                top: 30
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                minInterval: 1
            },
            yAxis: {
                type: 'category',
                data: tipeSeragam
            },
            series: seriesData,
            tooltip: {
                trigger: 'item',
                axisPointer: {
                    type: 'shadow'
                },
                fformatter: function(params) {
                    return `${params.seriesName} ${params.name} : ${params.value} PCS`;
                }
            },
        };

        myChart.setOption(option);

        const table1 = $('#list_{{ $dmenu }}').DataTable({
            language: {
                search: "Cari :",
                lengthMenu: "Tampilkan _MENU_ baris",
                zeroRecords: "Maaf - Data tidak ada",
                info: "Data _START_ - _END_ dari _TOTAL_",
                infoEmpty: "Tidak ada data",
                infoFiltered: "(pencarian dari _MAX_ data)"
            },
            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>',
                    autoFilter: true,
                    sheetName: 'Exported Data',
                    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'
                    }
                }
            ]
        });

        // Init DataTable for list_detail
        const table2 = $('#list_detail').DataTable({
            language: {
                search: "Cari :",
                lengthMenu: "Tampilkan _MENU_ baris",
                zeroRecords: "Maaf - Data tidak ada",
                info: "Data _START_ - _END_ dari _TOTAL_",
                infoEmpty: "Tidak ada data",
                infoFiltered: "(pencarian dari _MAX_ data)"
            },
            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>',
                    autoFilter: true,
                    sheetName: 'Exported Data',
                    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'
                    }
                }
            ]
        });

        // Tambahkan styling untuk tombol
        $('.dt-button').addClass('btn btn-secondary btn-sm').removeClass('dt-button');

        // Hide buttons based on $authorize
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjuniform/resources/views/report/rpsdep/result.blade.php</b> on line <b>388</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjuniform/resources/views/report/rpsdep/result.blade.php</b> on line <b>388</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjuniform/resources/views/report/rpsdep/result.blade.php</b> on line <b>389</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjuniform/resources/views/report/rpsdep/result.blade.php</b> on line <b>389</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjuniform/resources/views/report/rpsdep/result.blade.php</b> on line <b>390</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjuniform/resources/views/report/rpsdep/result.blade.php</b> on line <b>390</b><br />
    </script>
@endpush