@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 {{ $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="window.location.href='{{ url('/rptoee') }}'"><i
                                                class="fas fa-circle-left me-1"> </i><span
                                                class="font-weight-bold">Kembali</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <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">% Yield</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 :
                                            {{ $aktualYield }}%</span>
                                        <br>
                                        <span class="badge bg-default badge-pill mb-3" style="font-size: 15px;">Target :
                                            {{ $targetYield }}%</span>
                                        @if ($aktualYield > $targetYield)
                                            <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="YIELD"></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['yield'] }}%</strong>
                                            </div>

                                            @if ($group['yield'] >= $group['targetY'])
                                                <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="yield2" method="GET" action="{{ url('/rptoee/waste') }}" 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('yield2').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">
                            <div class="container">
                                <div class="row">
                                    <div class="col-8 offset-2">
                                        <h4 class="text-center">% OEE</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 :
                                            {{ $aktualOee }}%</span>
                                        <br>
                                        <span class="badge bg-default badge-pill mb-3" style="font-size: 15px;">Target :
                                            {{ $targetOee }}%</span>
                                        @if ($aktualOee >= $targetOee)
                                            <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="OEE"></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['oee'] }}%</strong>
                                            </div>

                                            @if ($group['oee'] >= $group['target'])
                                                <span class="badge bg-info">Tercapai</span>
                                            @else
                                                <span class="badge bg-danger">Tidak Tercapai</span>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach



                                {{-- <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 group-a"
                                                style="background-color: red; width: 15px; height: 15px; margin-right: 5px;">
                                            </div>
                                            <strong>GROUP B : {{ $oeeB }}%</strong>
                                        </div>
                                        @if ($oeeB >= $targetOeeB)
                                            <span class="badge bg-info badge-pill mb-3"
                                                style="font-size: 13px; align-self: center;">Tercapai</span>
                                        @else
                                            <span class="badge bg-danger badge-pill mb-3"
                                                style="font-size: 13px; align-self: center;">Tidak
                                                Tercapai</span>
                                        @endif
                                    </div>
                                </div>
                                <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 group-a"
                                                style="background-color: #FFD700; width: 15px; height: 15px; margin-right: 5px;">
                                            </div>
                                            <strong>GROUP C : {{ $oeeC }}%</strong>
                                        </div>
                                        @if ($oeeC >= $targetOeeC)
                                            <span class="badge bg-info badge-pill mb-3"
                                                style="font-size: 13px; align-self: center;">Tercapai</span>
                                        @else
                                            <span class="badge bg-danger badge-pill mb-3"
                                                style="font-size: 13px; align-self: center;">Tidak
                                                Tercapai</span>
                                        @endif
                                    </div>
                                </div>
                                <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 group-a"
                                                style="background-color: green; width: 15px; height: 15px; margin-right: 5px;">
                                            </div>
                                            <strong>GROUP D : {{ $oeeD }}%</strong>
                                        </div>
                                        @if ($oeeD >= $targetOeeD)
                                            <span class="badge bg-info badge-pill mb-3"
                                                style="font-size: 13px; align-self: center;">Tercapai</span>
                                        @else
                                            <span class="badge bg-danger badge-pill mb-3"
                                                style="font-size: 13px; align-self: center;">Tidak
                                                Tercapai</span>
                                        @endif
                                    </div>
                                </div> --}}
                            </div>
                            <div class="col text-center">
                                <form id="formRptavl" method="GET" action="{{ url('/rptoee/availability') }}"
                                    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('formRptavl').submit();">Details</button>
                            </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($targetOee);
        var datas = @json($oee);
        var warna = @json($warna);

        // INPUT DATA DAN LABEL SHIFTS
        var dataset = datas; // DATA / NILAINYA
        console.log(dataset.length);


        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: '% OEE', // 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: '% OEE',
                        },
                    },
                    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,
                                    '% OEE: ' + 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('OEE').getContext('2d');
        var lineChart = new Chart(ctx, config);
    </script>

    <script>
        // Ambil nilai target yield
        var trgtY = @json($targetYield);
        var datay = @json($yield);
        var warna = @json($warna);

        console.log('warna', warna);

        // INPUT DATA DAN LABEL SHIFTS
        var datasetY = datay;

        var labelsY = [];
        var tglY = @json($listTgl);

        // Generate repeating labels based on dataset length
        var shiftsY = ['1', '2', '3'];
        for (var i = 0; i < datasetY.length; i++) {
            var shiftNum = shiftsY[i % 3];
            labelsY.push(shiftNum);
        }

        var dataY = {
            labels: labelsY, //label untuk sb X
            datasets: [{
                label: '% Yield', // Dataset label
                data: datay, // 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: dataY, // Chart data
            options: {
                pointStyle: 'rect',
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '% Yield',
                        },
                    },
                    x: {
                        title: {
                            display: false,
                            text: ['Shifts'],
                        },
                        ticks: {
                            font: {
                                size: 10,
                            },
                        },
                    },
                    secondXAxis: {
                        axis: 'x',
                        labels: tglY,
                        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 = shiftsY[index % 3];
                                var tanggal = tglY[Math.floor(index / 3)];
                                var nilai = context.dataset.data[index];
                                return [
                                    'Date: ' + tanggal,
                                    'Shift: ' + shift,
                                    '% Yield: ' + nilai
                                ];
                            }
                        }
                    },
                    annotation: {
                        annotations: [{
                            type: 'line',
                            borderColor: 'black',
                            borderDash: [5, 5],
                            mode: 'horizontal',
                            scaleID: 'y',
                            value: trgtY,
                            borderWidth: 2,
                            label: {
                                content: 'Target',
                                enabled: true,
                                position: 'right',
                            },
                        }],
                    },
                }
            }

        };

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