@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Machine Performance'])
    <div class="container-fluid py-4">

        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row">
                            {{-- Kolom Mesin --}}
                            <div class="col-md-6 mb-3">
                                <h6>Pilih Mesin</h6>
                                {{-- @foreach ($namaMesin as $mesin)
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input machine-checkbox" id="mesin-{{ $mesin->kodemesin }}" value="{{ $mesin->kodemesin }}">
                                <label class="form-check-label" for="mesin-{{ $mesin->kodemesin }}">{{ $mesin->kodemesin }}</label>
                            </div>
                        @endforeach --}}
                                <select id="mesinSelect" class="form-control" multiple>
                                    @foreach ($namaMesin as $mesin)
                                        <option value="{{ $mesin->kodemesin }}">{{ $mesin->kodemesin }}</option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Kolom Shift --}}
                            {{-- <div class="col-md-6 mb-3">
                                <h6>Pilih Group</h6>
                                @foreach ($group as $item)
                                    @php
                                        preg_match('/([A-Za-z])$/', $item->name, $matches);
                                        $groupLetter = $matches[1] ?? '';
                                    @endphp
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input group-checkbox"
                                            id="group-{{ $groupLetter }}" value="{{ $groupLetter }}" name="group">
                                        <label class="form-check-label"
                                            for="group-{{ $groupLetter }}">{{ $item->name }}</label>
                                    </div>
                                @endforeach
                            </div> --}}

                            <div class="col-md-6 mb-3">
                                <h6>Pilih Group</h6>
                                <select id="groupSelect" class="form-control" multiple>
                                    @foreach ($group as $item)
                                        @php
                                            preg_match('/([A-Za-z])$/', $item->name, $matches);
                                            $groupLetter = $matches[1] ?? '';
                                        @endphp
                                        <option value="{{ $groupLetter }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                        </div>
                        {{-- <h6>Filter by Date Range</h6> --}}
                        <div class="row">
                            <div class="col-md-6">
                                <label for="startDate" class="form-label">Start Date</label>
                                <input type="date" id="startDate" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label for="endDate" class="form-label">End Date</label>
                                <input type="date" id="endDate" class="form-control">
                            </div>
                            {{-- <div class="col-md-2 d-flex align-items-end">
                            <button class="btn btn-primary w-100" id="filterDateBtn">Filter</button>
                        </div> --}}
                            {{-- <div class="col-md-2 d-flex align-items-end">
                            <button class="btn btn-success" id="filterAllBtn">Filter All</button>
                        </div> --}}
                        </div>

                        <div class="col-md-12 justify-content-between mt-3">
                            <button class="btn btn-success" id="filterAllBtn"><span class="fas fa-filter"></span>
                                Filter</button>
                            <button class="btn btn-danger" id="resetFilterBtn"><span class="fas fa-arrows-rotate"></span>
                                Reset Filter</button>
                            <button class="btn btn-warning" id="sinkronButton"><span class="fas fa-arrows-rotate"></span>
                                Sinkron Data SAP</button>
                        </div>



                        <h6 class="mt-4">Status Perubahan elemen pada Master data</h6>
                        <ul class="list-group">
                            @foreach ($statusSemua as $item)
                                <li class="list-group-item">
                                    <p>{{ $item->jenis }} : {{ $item->nama_elemen_kerja }} di update pada
                                        {{ \Carbon\Carbon::parse($item->updated_at)->format('d M Y') }}</p>
                                </li>
                            @endforeach

                            @foreach ($statusStretchFilm as $item)
                                <li class="list-group-item">
                                    <p>{{ $item->jenis }} : {{ 'Mesin: ' . $item->idMesin }} was updated at
                                        {{ \Carbon\Carbon::parse($item->updated_at)->format('d M Y') }}</p>
                                </li>
                            @endforeach

                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">Machine Performance</h6>
                    </div>
                    <div class="card-body p-3">
                        <ul id="performance-data" class="list-group"></ul>
                        {{-- bagian char --}}
                        {{-- <canvas id="chart-container" height="100"></canvas> --}}
                    </div>
                    <div class="card-body p-3">
                        <div id="charts-container" class="row mt-4"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal untuk btn sinkronisasi --}}
    <div class="modal fade" id="modalFilterSinkron" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Sinkronisasi Data SAP</h5>
                    <button type="button" class="btn-close text-muted" data-bs-dismiss="modal"
                        aria-label="Close">X</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col mb-3">
                                    <div class="col-lg-12 mb-3">
                                        <label for="kodeMesin" class="form-label me-2" style="min-width: 150px;">Kode Mesin
                                            <code>*</code></label>
                                        <select name="kode_mesin" id="kodeMesin" class="form-select">
                                            <option value=""></option>
                                            @foreach ($namaMesin as $msn)
                                                <option value="{{ $msn->kodemesin }}">{{ $msn->kodemesin }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-lg-12 mb-3">
                                        <label for="startDate" class="form-label me-2" style="min-width: 150px;">Start Date
                                            <code>*</code></label>
                                        <input type="date" name="start_date" id="startDate" class="form-control mb-3"
                                            value="{{ date('Y-m-d') }}">
                                    </div>
                                    <div class="col-lg-12 mb-3">
                                        <label for="endDate" class="form-label me-2" style="min-width: 150px;">End Date
                                            <code>*</code></label>
                                        <input type="date" name="end_date" id="endDate" class="form-control mb-3"
                                            value="{{ date('Y-m-d') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button type="button" class="btn btn-primary" id="btnSinkronIn"><i class="fas fa-arrows-rotate"></i>
                        Sinkron
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- End Modal untuk btn scan --}}
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // const performanceData = @json($tabel_performance->unique('KodeMesin'));
        const performanceData = @json($tabel_performance);

        performanceData.forEach(item => {
            if (item.ShiftGroup) {
                item.ShiftAngka = item.ShiftGroup;
            }
        });
        $(document).ready(function() {
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('startDate').value = today;
            document.getElementById('endDate').value = today;

            $('#mesinSelect').select2({
                placeholder: "Pilih Mesin",
                width: '100%'
            });

            $('#groupSelect').select2({
                placeholder: "Pilih Group",
                width: '100%'
            });
        });

        function generateCharts(data) {
            const chartsContainer = document.getElementById('charts-container');
            chartsContainer.innerHTML = '';

            data.forEach((item, index) => {
                const chartId = `chart-${index}`; // supaya ID tidak bentrok kalau mesin sama
                const chartCard = document.createElement('div');
                chartCard.className = 'col-md-6';
                chartCard.innerHTML = `
                <div class="card">
                    <div class="card-header pb-0 p-3">
                        <h6 class="mb-1">Start Date ${item.startdate} || end Date ${item.enddate} || Mesin ${item.KodeMesin} || shift ${item.ShiftGroup}</h6>
                    </div>
                    <div class="card-body">
                        <canvas id="${chartId}" style="height: 300px; width: 100%;"></canvas>
                    </div>
                    <div class="mt-2 text-center">
                        Performance Rewind: ${parseFloat(item.percentagePersiapan).toFixed(2)}%<br>
                        Performance Packing: ${parseFloat(item.percentageLoadPacking).toFixed(2)}%
                    </div>
                </div>
            `;
                chartsContainer.appendChild(chartCard);

                new Chart(document.getElementById(chartId), {
                    type: "bar",
                    data: {
                        labels: ["Performance Rewind", "Performance Packing"],
                        datasets: [{
                            label: "Performance %",
                            data: [
                                item.percentagePersiapan || 0,
                                item.percentageLoadPacking || 0
                            ],
                            backgroundColor: ["#4CAF50", "#4CAF50"]
                        }]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                callbacks: {
                                    label: ctx => `${ctx.raw}%`
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                max: 100,
                                ticks: {
                                    callback: value => `${value}%`
                                }
                            }
                        }
                    }
                });
            });
        }

        $('#filterAllBtn').click(function() {
            const mesin = $('#mesinSelect').val();
            // const mesin = Array.from(document.querySelectorAll('.machine-checkbox:checked'))
            //     .map(checkbox => checkbox.value);
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            // const selectedShifts = Array.from(document.querySelectorAll('.group-checkbox:checked'))
            //     .map(checkbox => checkbox.value);
            const selectedShifts = $('#groupSelect').val();
            // const selectedShifts = Array.from(document.querySelectorAll('.group-checkbox:checked'))
            //     .map(checkbox => parseInt(checkbox.value));
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ URL::to('/') }}/performance/filter",
                type: "POST",
                dataType: "JSON",
                data: {
                    mesin: mesin,
                    start_date: startDate,
                    end_date: endDate,
                    shift: selectedShifts
                },
                success: function(response) {
                    //console.log("DEBUG response", response);
                    if (response.status === "success") {
                        const dataList = response.data;
                        const chartData = response.chart;
                        const updatestatus = response.updates;
                        // Tampilkan Data ke List
                        const container = document.getElementById("performance-data");
                        container.innerHTML = "";
                        const chartsContainer = document.getElementById("charts-container");
                        chartsContainer.innerHTML = "";
                        //document.getElementById('charts-container').innerHTML = ''; 

                        if (dataList.length === 0) {
                            container.innerHTML = '<li class="list-group-item">Data tidak ada!</li>';
                            chartsContainer.innerHTML =
                                '<p class="text-center">No chart available.</p>';
                            return;
                        }

                        dataList.forEach(item => {
                            const listItem = document.createElement("li");
                            listItem.className = "list-group-item";
                            listItem.textContent =
                                `KodeMesin: ${item.KodeMesin} | Performance: ${item.percentagePersiapan} | PerformancePacking: ${item.percentageLoadPacking}| ShiftGroup: ${item.ShiftGroup}`;
                            container.appendChild(listItem);

                            generateCharts(dataList);

                            // const labels = dataList.map(item => `${item.KodeMesin} (${item.ShiftGroup})`);
                            // const values = dataList.map(item => parseFloat(item.percentagePerformance || 0));
                            // renderPerformanceChart(labels, values);
                        });
                    } else {
                        Swal.fire({
                            title: 'Gagal',
                            text: data.message,
                            icon: 'error',
                        });
                    }
                },

            });
            // const checkboxes = document.querySelectorAll('.machine-checkbox');
            // const selectedMachines = Array.from(checkboxes).filter(checkbox => checkbox.checked);

            // if(selectedMachines.length === 0){
            //     checkboxes.forEach(checkbox => {
            //         checkbox.checked = true;
            //     });
            // }

            //applyFilters();
        });

        // Saat user memilih tanggal, filter ulang tanpa memaksa mencentang semua mesin
        // document.getElementById('startDate').addEventListener('change',applyFilters);
        // document.getElementById('endDate').addEventListener('change',applyFilters);

        document.getElementById('resetFilterBtn').addEventListener('click', () => {
            document.querySelectorAll('.machine-checkbox').forEach(checkbox => {
                checkbox.checked = false;
            });
            document.querySelectorAll('.group-checkbox').forEach(checkbox => {
                checkbox.checked = false;
            });
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('startDate').value = today;
            document.getElementById('endDate').value = today;
            document.getElementById('performance-data').innerHTML =
                '<li class="list-group-item">Please select at least one machine.</li>';
            document.getElementById('charts-container').innerHTML = '';
        });

        // document.getElementById('startDate').addEventListener('change',applyFilters);
        // document.getElementById('endDate').addEventListener('change', applyFilters);

        // Tampilkan pesan awal jika tidak ada filter
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('performance-data').innerHTML =
                '<li class="list-group-item">Please select at least one machine.</li>'
        });

        $('#sinkronButton').click(function() {
            $('#modalFilterSinkron').modal('show');

        });

        $('#btnSinkronIn').click(function() {
            const btn = $(this);
            btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Memproses...');
            let kode_mesin = $('select[name="kode_mesin"]').val();
            let start_date = $('input[name="start_date"]').val();
            let end_date = $('input[name="end_date"]').val();

            if (kode_mesin == '' || start_date == '' || end_date == '') {
                btn.prop('disabled', false).html(
                    '<i class="fas fa-arrows-rotate"></i> Sinkron');
                Swal.fire({
                    title: "Warning!",
                    text: "Field Tidak Boleh Kosong",
                    icon: "warning"
                });
            }
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                }
            });

            // Pemanggilan AJAX
            $.ajax({
                url: '{{ URL::to('/') }}/performance/fetchData',
                type: 'POST',
                data: {
                    kode_mesin: kode_mesin,
                    start_date: start_date,
                    end_date: end_date
                },
                success: function(res) {
                    if (res.status == 'success') {
                        btn.prop('disabled', false).html(
                            '<i class="fas fa-arrows-rotate"></i> Sinkron');
                        Swal.fire({
                            title: "Berhasil!",
                            text: res.message,
                            icon: "success"
                        });
                    } else {
                        console.log('hehe')
                        btn.prop('disabled', false).html(
                            '<i class="fas fa-arrows-rotate"></i> Sinkron');
                        Swal.fire({
                            title: "Warning!",
                            text: res.message,
                            icon: "warning"
                        });
                    }
                },
                error: function(err) {
                    console.log('Gagal:', err);
                }
            });
        });
    </script>
@endpush