@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-4 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-4 mb-3">
                                <h6>Pilih Shift</h6>
                                <select name="shift[]" id="shiftSelect" class="form-select" multiple>
                                    @foreach ($shift as $item)
                                        @php $shiftNumber = preg_replace('/\D/', '', $item->name); @endphp
                                        <option value="{{ $shiftNumber }}">{{ $item->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            {{-- Kolom Group --}}
                            <div class="col-md-4 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>

                        {{-- Filter Tanggal --}}
                        <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>

                        {{-- Tombol --}}
                        <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 }} was updated at
                                        {{ \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>

                        <h6 class="mt-4" id = "missing-stretch-list-head"></h6>

                        <ul class="list-group" id="missing-stretch-list">
                            <!-- JS will inject <li> items here -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        {{-- TABEL --}}
        <div class="row mt-4">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0 p-3">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <h6 class="mb-0">Hasil Performance Mesin</h6>
                            <input type="text" id="searchInput" class="form-control w-auto" placeholder="Search...">
                        </div>
                        <div class="mt-3 text-start">
                            <button class="btn btn-primary" id="exportExcelBtn" hidden>Export to Excel</button>
                        </div>
                    </div>

                    <div class="card-body p-3" id="performance-data">
                        <div class="table-responsive">
                            <table id="performance-table" class="table table-bordered table-hover align-middle text-center">
                                <thead class="table-light">
                                    <tr>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Mesin</th>
                                        <th>Shift</th>
                                        <th>Group</th>
                                        <th>Performance Rewind</th>
                                        <th>Performance Packing</th>
                                        <th>Proses Rewind</th>
                                        <th>Load Rewind</th>
                                        <th>Ganti Jumbo</th>
                                        <th>Ganti Potongan</th>
                                        <th>Joint</th>
                                        <th>Load Packing</th>
                                        <th>Stretch Film</th>
                                        <th>Defect</th>
                                    </tr>
                                </thead>
                                <tbody id="performance-table-body">
                                    <tr>
                                        <td colspan="12" class="text-center">Please select at least one machine.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </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

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<style>
    .bg-custom-warning {
        background-color: #ffc107 !important;
        /* kuning khas Bootstrap */
        color: #FFFFFF !important;
    }

    #performance-table_wrapper {
        overflow: auto;
    }

    table.dataTable th,
    table.dataTable td {
        white-space: nowrap;
    }

    .dataTables_scrollBody {
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    /* Konsistensi warna header frozen dan tidak frozen */
    table.dataTable thead th {
        background-color: #e9ecef !important;
        /* Warna abu-abu Bootstrap */
        border-right: 1px solid #dee2e6 !important;
    }

    /* Garis pemisah antar kolom */
    table.dataTable td,
    table.dataTable th {
        border: 1px solid #dee2e6 !important;
    }

    /* Untuk memastikan fixed column punya border juga */
    .dtfc-fixed-left {
        background-color: #ffffff;
        /* Atur background agar tidak berbeda */
        border-right: 1px solid #dee2e6;
    }

    /* Menyamakan font dan padding */
    table.dataTable td,
    table.dataTable th {
        padding: 0.75rem;
        font-size: 0.875rem;
        vertical-align: middle;
    }

    /* Hilangkan garis ganda di pinggir kanan */
    .dataTables_wrapper .dataTables_scrollBody {
        border-left: none !important;
    }
</style>


@push('js')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <!-- FixedColumns CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.bootstrap5.min.css">

    <!-- FixedColumns JS -->
    <script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>


    <script>
        let filteredData = null;

        document.getElementById('exportExcelBtn').addEventListener('click', function() {
            const formData = new FormData();

            fetch("{{ url('/performancespv/export') }}", {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(filteredData.data)
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.blob(); // Mengambil response sebagai blob
                })
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    a.download = 'Performance_Data.xlsx'; // Nama file yang akan diunduh
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Terjadi kesalahan saat mengekspor data.');
                });
        });

        document.addEventListener("DOMContentLoaded", 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%'
            });

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

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

        let dataTable = null;

        // event listener search input cukup sekali
        document.getElementById('searchInput').addEventListener('keyup', function() {
            if (dataTable) {
                dataTable.search(this.value).draw();
            }
        });

        function getBadgeClass(value) {
            const val = parseFloat(value ?? 0);
            if (val < 50) return 'bg-danger'; // merah
            if (val < 75) return 'bg-custom-warning'; // kuning
            return 'bg-success'; // hijau
        }


        document.getElementById('filterAllBtn').addEventListener('click', function() {
            // const mesin = Array.from(document.querySelectorAll('.machine-checkbox:checked')).map(cb => cb.value);
            // const shifts = Array.from(document.querySelectorAll('.shift-checkbox:checked')).map(cb => cb.value);
            // const groups = Array.from(document.querySelectorAll('.group-checkbox:checked')).map(cb => cb.value);
            const mesin = $('#mesinSelect').val() || [];
            const shifts = $('#shiftSelect').val() || [];
            const groups = $('#groupSelect').val() || [];

            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;

            const formData = new FormData();
            mesin.forEach(m => formData.append('mesin[]', m));
            shifts.forEach(s => formData.append('shift[]', s));
            groups.forEach(g => formData.append('group[]', g));
            formData.append('start_date', startDate);
            formData.append('end_date', endDate);

            fetch("{{ url('/performancespv/filter') }}", {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    filteredData = data;

                    const tbody = document.getElementById('performance-table-body');

                    // Destroy DataTables instance kalau ada
                    if (dataTable) {
                        dataTable.destroy();
                        dataTable = null;
                    }

                    // Kosongkan tbody beneran
                    tbody.innerHTML = '';

                    const listContainer = $('#missing-stretch-list');
                    // const listContainerHead = $('#missing-stretch-list-head');
                    const listContainerHead = document.getElementById('missing-stretch-list-head');
                    listContainer.empty(); 
                    // listContainerHead.empty();

                    if (data.status === 'success' && data.data.length > 0) {
                        data.data.forEach(row => {
                            const tr = document.createElement('tr');
                            tr.innerHTML = `
                                <td>${row.startdate ?? '-'}</td>
                                <td>${row.enddate ?? '-'}</td>
                                <td>${row.KodeMesin ?? '-'}</td>
                                <td>${row.ShiftGroup?.substring(0, 1) ?? '-'}</td>
                                <td>${row.ShiftGroup?.substring(1) ?? '-'}</td>
                                <td>
                                    <span class="badge ${getBadgeClass(row.grandPerformanceRewind)}">
                                        ${parseFloat(row.grandPerformanceRewind ?? 0).toFixed(2)}%
                                    </span>
                                </td>
                                <td>
                                    <span class="badge ${getBadgeClass(row.grandPerformancePacking)}">
                                        ${parseFloat(row.grandPerformancePacking ?? 0).toFixed(2)}%
                                    </span>
                                </td>

                                <td>${parseFloat(row.grandPersiapan ?? 0).toFixed(2)}</td>
                                <td>${parseFloat(row.grandTotal ?? 0).toFixed(2)}</td>
                                <td>${parseFloat(row.grandGantiJumbo ?? 0).toFixed(2)}</td>
                                <td>${parseFloat(row.grandGantiPotongan ?? 0).toFixed(2)}</td>
                                <td>${parseFloat(row.grandJoint ?? 0).toFixed(2)}</td>
                                <td>${parseFloat(row.grandLoadPacking ?? 0).toFixed(2)}</td>
                                <td>${parseFloat(row.grandStretch ?? 0).toFixed(2)}</td>
                                <td>${parseFloat(row.grandDefect ?? 0).toFixed(2)}</td>
                            `;
                            tbody.appendChild(tr);
                        });

                        const hasMissing = data.data.some(item => item.missingStretch && item.missingStretch.length > 0);

                        if (hasMissing) {
                            // const html = 'DATA CUSTOMER DAN MATERIAL TIDAK ADA';
                            listContainerHead.innerHTML ='DATA CUSTOMER DAN MATERIAL TIDAK ADA';
                        }

                        data.data.forEach(item => {
                            if (item.missingStretch && item.missingStretch.length > 0) {
                                item.missingStretch.forEach(missing => {
                                    const html = `
                                        <li class="list-group-item">
                                            <p>
                                                <strong>Customer:</strong> ${missing.Customer}<br>
                                                <strong>Material:</strong> ${missing.Material}<br>
                                                <strong>Mesin:</strong> ${item.KodeMesin}<br>
                                                <strong>Shift:</strong> ${item.ShiftGroup}<br>
                                                <strong>Date:</strong> ${formatDate(item.startdate)}
                                            </p>
                                        </li>`;
                                    listContainer.append(html);
                                });
                            }
                        });

                        // Enable export button after filtering
                        document.getElementById('exportExcelBtn').hidden = false;

                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'No data available',
                            text: 'No data matches the selected filter.',
                            confirmButtonText: 'OK'
                        });

                        // kosongkan tbody beneran tanpa row dummy
                        tbody.innerHTML = '';
                        listContainer.innerHTML = ''; // clear any previous list
                    }

                    // Inisialisasi ulang datatables dengan fixedColumns
                    dataTable = new DataTable('#performance-table', {
                        scrollX: true,
                        scrollCollapse: true,
                        paging: true,
                        fixedColumns: {
                            leftColumns: 5 // Freeze kolom Date, Mesin, Shift, Group
                        },
                        dom: 'tip',
                        pageLength: 11,
                    });

                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire('Error', 'Something went wrong. Please try again.', 'error');
                });
        });

        function formatDate(dateStr) {
    const date = new Date(dateStr);
    return date.toLocaleDateString('en-GB', {
        day: '2-digit',
        month: 'short',
        year: 'numeric'
    });
}

        document.getElementById('resetFilterBtn').addEventListener('click', () => {
            document.querySelectorAll('.machine-checkbox, .shift-checkbox, .group-checkbox').forEach(cb => cb
                .checked = false);
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('startDate').value = today;
            document.getElementById('endDate').value = today;
            document.getElementById('searchInput').value = '';

            if (dataTable) {
                dataTable.destroy();
                dataTable = null;
            }

            const tbody = document.getElementById('performance-table-body');
            tbody.innerHTML =
                '<tr><td colspan="12" class="text-center">Please select at least one machine.</td></tr>';

            // Disable export button when reset
            document.getElementById('exportExcelBtn').hidden = true;
        });

        $('#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