@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">
                        <div class="card-header">
                            <h5 class="mb-0">Result Waste & Coextruder</h5>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="container">
                                <div class="row">
                                    <div class="col-8 offset-2">
                                        <h4 class="text-center">% Waste</h4>
                                        <p class="text-center">Line {{ $line }}</p>
                                        <p class="text-center">{{ $tgl1 }} - {{ $tgl2 }}</p>
                                    </div>
                                    <div class="col-2" style="justify-items: center">
                                        <span class="badge bg-default badge-pill mb-3" style="font-size: 15px;">Actual :
                                            {{ $aktualWaste }} %</span>
                                        <br>
                                        <span class="badge bg-default badge-pill mb-3" style="font-size: 15px;">Target :
                                            {{ $targetWaste }} %</span>
                                        @if ($aktualWaste < $targetWaste)
                                            <span class="badge bg-info badge-pill mb-3"
                                                style="font-size: 15px;">Tercapai</span>
                                        @else
                                            <span class="badge bg-danger badge-pill mb-3" style="font-size: 15px;">Tidak
                                                Tercapai</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <!-- ISI CANVAS -->
                            <canvas id="WASTE"></canvas>
                            <div class="row mt-3">
                                @foreach ($groups as $group)
                                    <div class="col" style="text-align: center">
                                        <div class="legend-item"
                                            style="display: inline-flex; flex-direction: column; align-items: flex-start;">

                                            <div style="display: inline-flex; align-items: center; margin-bottom: 5px;">
                                                <div class="color-box"
                                                    style="background-color: {{ strtolower($group['color']) }}; width: 15px; height: 15px; margin-right: 5px;">
                                                </div>
                                                <strong>{{ $group['label'] }} : {{ $group['waste'] }}%</strong>
                                            </div>

                                            @if ($group['waste'] < $group['targetW'])
                                                <span class="badge bg-info">Tercapai</span>
                                            @else
                                                <span class="badge bg-danger">Tidak Tercapai</span>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="col text-center">
                                <form id="formRptwaste" method="GET" action="{{ url('/rptoee/wasteout') }}"
                                    target="_blank" style="display:none;">
                                    @csrf
                                    <input type="hidden" name="resource" value="{{ $resource }}">
                                    <input type="hidden" name="line" value="{{ $line }}">
                                    <input type="hidden" name="tgl1" value="{{ $tanggal1 }}">
                                    <input type="hidden" name="tgl2" value="{{ $tanggal2 }}">
                                </form>

                                <button class="btn btn-primary mt-2"
                                    onclick="document.getElementById('formRptwaste').submit();">Details</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <br>
        <br>
        <br>

        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row px-4 py-2 mt-4">
                            <div class="container">
                                <div class="row">
                                    <div class="col-8 offset-2">
                                        <h4 class="text-center">% Co-Extruder</h4>
                                        <p class="text-center">Line {{ $line }}</p>
                                        <p class="text-center">{{ $tgl1 }} - {{ $tgl2 }}</p>
                                    </div>
                                    <div class="col-2" style="justify-items: center">
                                        <span class="badge bg-default badge-pill mb-3" style="font-size: 15px;">Actual :
                                            {{ $aktualCoext }}%</span>
                                        <br>
                                        <span class="badge bg-default badge-pill mb-3" style="font-size: 15px;">Target :
                                            {{ $targetCoext }}%</span>
                                        <br>
                                        @if ($aktualCoext >= $targetCoext)
                                            <span class="badge bg-info badge-pill mb-3"
                                                style="font-size: 15px;">Tercapai</span>
                                        @else
                                            <span class="badge bg-danger badge-pill mb-3" style="font-size: 15px;">Tidak
                                                Tercapai</span>
                                        @endif
                                    </div>
                                </div>

                            </div>
                            <hr>
                            <!-- ISI CANVAS -->
                            <canvas id="COEXT"></canvas>
                            <div class="row mt-3">
                                @foreach ($groups as $group)
                                    <div class="col" style="text-align: center">
                                        <div class="legend-item"
                                            style="display: inline-flex; flex-direction: column; align-items: flex-start;">

                                            <div style="display: inline-flex; align-items: center; margin-bottom: 5px;">
                                                <div class="color-box"
                                                    style="background-color: {{ strtolower($group['color']) }}; width: 15px; height: 15px; margin-right: 5px;">
                                                </div>
                                                <strong>{{ $group['label'] }} : {{ $group['coext'] }}%</strong>
                                            </div>

                                            @if ($group['coext'] >= $group['targetC'])
                                                <span class="badge bg-info">Tercapai</span>
                                            @else
                                                <span class="badge bg-danger">Tidak Tercapai</span>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </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>
        // Ambil nilai target
        var trgt = @json($targetWaste);
        var datas = @json($waste);
        var warna = @json($warna);

        // INPUT DATA DAN LABEL SHIFTS
        var dataset = datas; // DATA / NILAINYA

        var labels = [];
        var tgl = @json($listTgl);

        // Generate repeating labels based on dataset length
        var shifts = ['1', '2', '3'];

        for (var i = 0; i < dataset.length; i++) {
            var shiftNumber = shifts[i % 3];
            labels.push(shiftNumber);
        }

        var data = {
            labels: labels, //label untuk sb X
            datasets: [{
                label: '% Waste', // Dataset label
                data: datas, // Y-axis values
                borderColor: 'blue', // Line color
                backgroundColor: 'rgba(0, 0, 255, 0.1)', // Area under the line color
                pointBackgroundColor: warna, // Different colors for points
                pointRadius: 7, // Adjust the size of the dots
                pointBorderWidth: 1, // Remove the border around the dots
                fill: true,
            }, ],
        };

        // Chart configuration
        var config = {
            type: 'line', // Chart type
            data: data, // Chart data
            options: {
                pointStyle: 'rect',
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '% Waste',
                        },
                    },
                    x: {
                        title: {
                            display: false,
                            text: ['Shifts'],
                        },
                        ticks: {
                            font: {
                                size: 10,
                            },
                        },
                    },
                    secondXAxis: {
                        axis: 'x',
                        labels: tgl,
                        grid: {
                            drawOnChartArea: false
                        }
                    },
                },
                plugins: {
                    tooltip: {
                        displayColors: false, // HILANGKAN kotak warna
                        callbacks: {
                            title: function() {
                                return ''; // HILANGKAN title (angka di atas)
                            },
                            label: function(context) {
                                var index = context.dataIndex;
                                var shift = shifts[index % 3];
                                var tanggal = tgl[Math.floor(index / 3)];
                                var nilai = context.dataset.data[index];
                                return [
                                    'Date: ' + tanggal,
                                    'Shift: ' + shift,
                                    '% Waste: ' + nilai
                                ];
                            }
                        }
                    },
                    annotation: {
                        annotations: [{
                            type: 'line',
                            borderColor: 'black',
                            borderDash: [5, 5],
                            mode: 'horizontal',
                            scaleID: 'y',
                            value: trgt,
                            borderWidth: 2,
                            label: {
                                content: 'Target',
                                enabled: true,
                                position: 'right',
                            },
                        }],
                    },
                }
            }

        };

        // Create the chart
        var ctx = document.getElementById('WASTE').getContext('2d');
        var lineChart = new Chart(ctx, config);
    </script>

    <script>
        // Ambil nilai target
        var trgt = @json($targetCoext);
        var datas = @json($coextruder);
        var warna = @json($warnaCoext);

        // INPUT DATA DAN LABEL SHIFTS
        var dataset = datas; // DATA / NILAINYA

        var labels = [];
        var tgl = @json($listTgl);

        // Generate repeating labels based on dataset length
        var shifts = ['1', '2', '3'];

        for (var i = 0; i < dataset.length; i++) {
            var shiftNumber = shifts[i % 3];
            labels.push(shiftNumber);
        }

        var data = {
            labels: labels, //label untuk sb X
            datasets: [{
                label: '% Coextruder', // Dataset label
                data: datas, // Y-axis values
                borderColor: 'blue', // Line color
                backgroundColor: 'rgba(0, 0, 255, 0.1)', // Area under the line color
                pointBackgroundColor: warna, // Different colors for points
                pointRadius: 7, // Adjust the size of the dots
                pointBorderWidth: 1, // Remove the border around the dots
                fill: true,
            }, ],
        };

        // Chart configuration
        var configy = {
            type: 'line', // Chart type
            data: data, // Chart data
            options: {
                pointStyle: 'rect',
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '% Coextruder',
                        },
                    },
                    x: {
                        title: {
                            display: false,
                            text: ['Shifts'],
                        },
                        ticks: {
                            font: {
                                size: 10,
                            },
                        },
                    },
                    secondXAxis: {
                        axis: 'x',
                        labels: tgl,
                        grid: {
                            drawOnChartArea: false
                        }
                    },
                },
                plugins: {
                    tooltip: {
                        displayColors: false, // HILANGKAN kotak warna
                        callbacks: {
                            title: function() {
                                return ''; // HILANGKAN title (angka di atas)
                            },
                            label: function(context) {
                                var index = context.dataIndex;
                                var shift = shifts[index % 3];
                                var tanggal = tgl[Math.floor(index / 3)];
                                var nilai = context.dataset.data[index];
                                return [
                                    'Date: ' + tanggal,
                                    'Shift: ' + shift,
                                    '% Coextruder: ' + nilai
                                ];
                            }
                        }
                    },
                    annotation: {
                        annotations: [{
                            type: 'line',
                            borderColor: 'black',
                            borderDash: [5, 5],
                            mode: 'horizontal',
                            scaleID: 'y',
                            value: trgt,
                            borderWidth: 2,
                            label: {
                                content: 'Target',
                                enabled: true,
                                position: 'right',
                            },
                        }],
                    },
                }
            }

        };

        // Create the chart
        var ctxy = document.getElementById('COEXT').getContext('2d');
        var lineChart = new Chart(ctxy, configy);
    </script>
@endpush