@extends('layouts.app')
@section('title')
    OEE DASHBOARD
@endsection
@section('content')
    <style>
        .card1 {
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 16px;
            text-align: center;
        }

        .card-header1 {
            font-weight: bold;
            margin-bottom: 8px;
        }

        .bar-container {
            display: flex;
            justify-content: space-between;
            font-size: 17px;
            text-align: left;
            margin-bottom: 8px;
            width: 100%;
        }

        .bar-label {
            display: inline-block;
            width: 100px;
        }

        .bar {
            width: 150px;
            height: 10px;
            background-color: #e6e6e6;
            border-radius: 5px;
            display: inline-block;
            vertical-align: middle;
            margin-top: 9px;
        }

        .bar-fill {
            height: 100%;
            border-radius: 5px;
            transition: width 1s;
            background-color: #4CAF50;
        }

        .details-button {
            display: inline-block;
            padding: 8px 16px;
            background-color: #3f51b5;
            cursor: pointer;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            margin-top: 16px;
            width: 100%;
        }

        .border-red {
            border: 2px solid red;
        }

        .blink {
            animation: blinker 1s linear infinite;
        }

        .blink-border {
            animation: border-blinker 1s linear infinite;
        }

        @keyframes blinker {
            50% {
                opacity: 0;
            }
        }

        @keyframes border-blinker {
            50% {
                border-color: transparent;
            }
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/vendor/daterange/daterange.css') }}" />
    <div class="row gx-5">
        <div class="col-lg-6 col-sm-6 col-12">
            <div class="card mb-3">
                <div class="card-body pb-3">
                    <div class="m-0">
                        <div class="form-group">
                            <label class="form-label" for="abc12">Date Range</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-calendar4"></i>
                                </span>
                                <input type="text" id="abc12" class="form-control datepicker-range-iso-week-numbers">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-sm-6 col-12">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="m-0">
                        <label class="form-label" for="machine">Machine Name</label>
                        <select id="machine" class="form-select" multiple>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row gx-3 mb-3">
        <div class="col-12 d-flex justify-content-end">
            <button type="button" class="btn btn-info me-2" id="generate">
                <i class="bi bi-bar-chart"></i> <span id="generate_text">GENERATE OEE</span>
            </button>
        </div>
    </div>
    <div class="row gx-3" id="charts">
    </div>

    <div id="paginationContainer" class="d-flex justify-content-center mt-3"></div>

    {{-- OEE DETAILS MODAL --}}
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalTitle" aria-modal="true"
        role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalTitle">

                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive" id="popUp">
                        <table class="table table-bordered m-0 w-100" id="modalTable">
                            <thead>
                                <tr>
                                    <th>Order No</th>
                                    <th>Part No</th>
                                    <th>Cycle Time(s)</th>
                                    <th>No of Cavity</th>
                                    <th>Ideal Run Rate</th>
                                    <th>Total Produced</th>
                                    <th>Rejected Qty</th>
                                    <th>Down Time(hr)</th>
                                    <th>Production Time(hr)</th>
                                    <th>Setup Time(hr)</th>
                                    <th>Performance(%)</th>
                                    <th>Quality(%)</th>
                                    <th>Availability(%)</th>
                                    <th>OEE(%)</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="exportToExcel()">Export</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Datatables -->
        <script src="{{ asset('assets/js/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('assets/js/input.js') }}"></script>
        <!-- Date Range JS -->
        <script src="{{ asset('assets/js/moment.min.js') }}"></script>
        <script src="{{ asset('assets/vendor/daterange/daterange.js') }}"></script>
        <script src="{{ asset('assets/js/chart.js') }}"></script>
        <script src="{{ asset('assets/js/chartjs-plugin-datalabels.min.js') }}"></script>
        <script>
            let modalTable = $('#modalTable').DataTable({
                paging: true,
                pagingType: 'input'
            });

            $(document).ready(function() {
                $(".datepicker-range-iso-week-numbers").daterangepicker({
                    drops: "up",
                    opens: "left",
                    showWeekNumbers: true,
                    showISOWeekNumbers: true,
                    startDate: moment().startOf("hour"),
                    endDate: moment().startOf("hour").add(32, "hour"),
                    locale: {
                        format: "YYYY-MM-DD",
                    },
                });
                $('#generate').trigger('click');
                $('#machine').select2({
                placeholder: 'Select Machine',
                ajax: {
                    url: '{{ route('machine.search') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term,
                            page: params.page || 1
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;

                        return {
                            results: $.map(data.items, function(item) {
                                return {
                                    text: item.name,
                                    id: item.id,
                                };
                            }),
                            pagination: {
                                more: (params.page * 10) < data
                                    .total_count
                            }
                        };
                    },
                    cache: true
                }
            });
            });

            function getDateRange() {
                var datepicker = $(".datepicker-range-iso-week-numbers").data('daterangepicker');
                return {
                    start_date: datepicker.startDate.format('YYYY-MM-DD'),
                    end_date: datepicker.endDate.format('YYYY-MM-DD')
                };
            }

            $('#generate').on('click', function() {
                $('#generate_text').text('GENERATING...');
                $('#generate').attr('disabled', 'disabled');
                let machines = $('#machine').val();
                let dates = getDateRange();
                let start_date = dates.start_date;
                let end_date = dates.end_date;

                $.ajax({
                    url: '{{ route('oee.generate') }}',
                    type: 'GET',
                    data: {
                        machines: machines,
                        start_date: start_date,
                        end_date: end_date
                    },
                    success: function(response) {
                        responseData = response;
                        const machinesArray = Object.keys(response).map(machineName => ({
                            name: machineName,
                            data: response[machineName]
                        }));
                        initializePagination(machinesArray, start_date, end_date);
                        $('#generate_text').text('GENERATE OEE');
                        $('#generate').removeAttr('disabled');
                    },
                });
            });

            function initializePagination(machinesArray, start_date, end_date) {
                const itemsPerPage = 6;
                let currentPage = 1;

                function renderPage(page) {
                    $('#charts').html('');
                    const startIndex = (page - 1) * itemsPerPage;
                    const endIndex = startIndex + itemsPerPage;
                    const currentItems = machinesArray.slice(startIndex, endIndex);

                    currentItems.forEach(machine => {
                        renderChart(machine.name, machine.data, start_date, end_date);
                    });

                    renderPaginationControls(machinesArray.length, itemsPerPage, page);
                }

                function renderPaginationControls(totalItems, itemsPerPage, currentPage) {
                    const totalPages = Math.ceil(totalItems / itemsPerPage);
                    const paginationContainer = $('#paginationContainer');
                    paginationContainer.html('');

                    const createButton = (text, page, disabled = false, active = false) => {
                        return $("<button>", {
                            class: `btn btn-primary mx-1 ${active ? 'active' : ''} ${disabled ? 'disabled' : ''}`,
                            text: text,
                            click: function() {
                                if (!disabled) {
                                    renderPage(page);
                                }
                            }
                        });
                    };

                    paginationContainer.append(createButton('First', 1, currentPage === 1));
                    paginationContainer.append(createButton('Previous', currentPage - 1, currentPage === 1));

                    for (let i = 1; i <= totalPages; i++) {
                        paginationContainer.append(createButton(i, i, false, currentPage === i));
                    }

                    paginationContainer.append(createButton('Next', currentPage + 1, currentPage === totalPages));
                    paginationContainer.append(createButton('Last', totalPages, currentPage === totalPages));
                }

                renderPage(currentPage);
            }

            function renderChart(machineName, machineData, start_date, end_date) {
                const chartDiv = document.createElement('div');
                chartDiv.classList.add('col-md-4', 'mb-4');
                const chartId = `${machineName.replace(/\s+/g, '')}Chart`;
                let $color = '';

                if (machineData.production == null) {
                    $color = 'grey';
                } else if (machineData.production != null) {
                    if (machineData.production?.production?.status == 'Not-initiated' || machineData.production?.production?.status == 'Pause') {
                        $color = 'grey';
                    }else if(machineData.production?.production?.status == 'Start'){
                        $color = 'green';
                    }
                } else if (machineData.preperation) {
                    $color = 'yellow';
                } else if (machineData.preperation == null && machineData.machine_production == null) {
                    $color = 'red';
                } else if (machineData.machine_production != null) {
                    $color = 'green';
                }else{
                    $color = 'grey';
                }

                chartDiv.innerHTML = `
                    <div class="card1 ${machineData.call_for_assistance != null ? 'border-red blink-border' : ''}">
                        <div class="card-header1 text-center p-0 pt-2" style="background: ${$color};">${machineName}</div>
                        <div class="machine-status">Machine Status: <span class="${machineData.status == 'ON' ? 'text-success' : 'text-danger'}">${machineData.status}</span></div>
                        <canvas id="${chartId}" width="200" height="200"></canvas>
                        <div class="bar-container availability">
                            <span class="bar-label">Availability</span>
                            <div class="bar">
                                <div class="bar-fill" id="${chartId}_availabilityBar"></div>
                            </div>
                            <span id="${chartId}_availabilityValue"></span>
                        </div>
                        <div class="bar-container performance">
                            <span class="bar-label">Performance</span>
                            <div class="bar">
                                <div class="bar-fill" id="${chartId}_performanceBar"></div>
                            </div>
                            <span id="${chartId}_performanceValue"></span>
                        </div>
                        <div class="bar-container quality">
                            <span class="bar-label">Quality</span>
                            <div class="bar">
                                <div class="bar-fill" id="${chartId}_qualityBar"></div>
                            </div>
                            <span id="${chartId}_qualityValue"></span>
                        </div>
                        <a class="details-button" onclick="generateDetail('${machineName}', '${start_date}', '${end_date}')">View OEE History</a>
                    </div>`;
                document.getElementById('charts').appendChild(chartDiv);
                
                const ctx = document.getElementById(chartId).getContext('2d');
                let oeeColor = '#4CAF50';
                if (machineData.oee < 60) {
                    oeeColor = '#F44336';
                } else if (machineData.oee < 85) {
                    oeeColor = '#FFA500';
                }
                const oeeChart = new Chart(ctx, {
                    type: 'doughnut',
                    data: {
                        datasets: [{
                            data: [machineData.oee, 100 - machineData.oee],
                            backgroundColor: [oeeColor, '#e6e6e6'],
                            borderWidth: 0
                        }]
                    },
                    options: {
                        rotation: 0,
                        circumference: 360,
                        cutout: '70%',
                        plugins: {
                            tooltip: { enabled: false },
                            legend: { display: false },
                            datalabels: {
                                display: true,
                                formatter: (value, context) => {
                                    return context.dataIndex === 0 ? `${machineData.oee}% OEE` : '';
                                },
                                color: '#000',
                                font: {
                                    size: 18,
                                    weight: 'bold'
                                }
                            }
                        }
                    },
                    plugins: [ChartDataLabels]
                });

                function getProgressBarColor(percent) {
                    if (percent >= 85) return '#4CAF50';
                    if (percent >= 60) return '#FFA500';
                    return '#F44336';
                }

                // Set bar widths and colors dynamically
                const availabilityBar = document.getElementById(`${chartId}_availabilityBar`);
                const performanceBar = document.getElementById(`${chartId}_performanceBar`);
                const qualityBar = document.getElementById(`${chartId}_qualityBar`);

                availabilityBar.style.width = `${machineData.availability}%`;
                availabilityBar.style.backgroundColor = getProgressBarColor(machineData.availability);

                performanceBar.style.width = `${machineData.performance}%`;
                performanceBar.style.backgroundColor = getProgressBarColor(machineData.performance);

                qualityBar.style.width = `${machineData.quality}%`;
                qualityBar.style.backgroundColor = getProgressBarColor(machineData.quality);

                // Set percentage text
                document.getElementById(`${chartId}_availabilityValue`).innerText = `${machineData.availability}%`;
                document.getElementById(`${chartId}_performanceValue`).innerText = `${machineData.performance}%`;
                document.getElementById(`${chartId}_qualityValue`).innerText = `${machineData.quality}%`;

            }

            function generateDetail(machineName, start_date, end_date) {
                $.ajax({
                    url: '{{ route('oee.details') }}',
                    method: "GET",
                    data: {
                        machine: machineName,
                        start_date: start_date,
                        end_date: end_date
                    },
                    success: function(response) {
                        modalTable.clear(); // Clear existing data

                        response.forEach(function(detail) {
                            modalTable.row.add([
                                detail.order_no,
                                detail.part_no,
                                detail.cycle_time,
                                detail.no_cavity,
                                detail.ideal_run_rate,
                                detail.total_produced,
                                detail.rejected_qty,
                                parseFloat(detail.down_time).toFixed(2),
                                parseFloat(detail.production_time).toFixed(2),
                                parseFloat(detail.setup_time).toFixed(2),
                                detail.performance,
                                detail.quality,
                                detail.availability,
                                detail.oee
                            ]);
                        });

                        modalTable.draw(false); // Redraw table with new data
                        $('#exampleModalTitle').text(machineName);
                        $('#exampleModal').modal('show');
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                    }
                });
            }

            function exportToExcel() {
                if ( $.fn.DataTable.isDataTable('#modalTable') ) {
                    $('#modalTable').DataTable().destroy();
                }
                const table = document.getElementById("modalTable");
                const rows = table.querySelectorAll("tr");
                let csv = [];

                for (let i = 0; i < rows.length; i++) {
                    const cells = rows[i].querySelectorAll("td, th");
                    let row = [];
                    for (let j = 0; j < cells.length; j++) {
                        row.push('"' + cells[j].innerText.replace(/"/g, '""') + '"');
                    }
                    csv.push(row.join(","));
                }

                const csvContent = "\uFEFF" + csv.join("\n");
                const blob = new Blob([csvContent], {
                    type: 'text/csv;charset=utf-8;'
                });

                // if we're using IE/Edge, then use different download call
                if (typeof navigator.msSaveOrOpenBlob === 'function') {
                    navigator.msSaveOrOpenBlob(blob, "oee.csv");
                } else {
                    // the next code will generate a temp <a /> tag that you can trigger a hidden click for it to start downloading
                    const link = document.createElement('a');
                    const csvUrl = URL.createObjectURL(blob);

                    link.href = csvUrl;
                    link.setAttribute('download', "oee.csv");

                    // set the visibility hidden so that there is no effect on your web-layout
                    link.style.visibility = 'hidden';

                    // finally we will append the anchor tag and remove it after clicking it
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }
                $('#modalTable').DataTable({
                    paging: true,
                    pagingType: 'input'
                });
            }
        </script>
    @endsection