@extends('layouts.app')
@section('title')
    DASHBOARD / MACHINE STATUS
@endsection
@section('content')
    <style>
        .border-red {
            border: 2px solid yellow;
        }

        .bg-yellow {
            background: yellow;
        }

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

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

        .bg-grey {
            background: grey;
        }

        .bg-red {
            background: red;
        }

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

        @keyframes border-blinker {
            50% {
                border-color: transparent;
            }
        }
    </style>



    <div class="row">
        <div class="custom-tabs-container">
            <ul class="nav nav-tabs justify-content-end" id="customTab3" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" id="tab-oneAA" data-bs-toggle="tab" href="#oneAA" role="tab"
                        aria-controls="oneAA" aria-selected="true"><i class="bi bi-gear-wide-connected"></i>Machine</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="tab-twoAA" data-bs-toggle="tab" href="#twoAA" role="tab"
                        aria-controls="twoAA" aria-selected="false"><i class="bi bi-tools"></i>Assembly</a>
                </li>
            </ul>
            <div class="tab-content" id="customTabContent3">
                <div class="tab-pane fade show active" id="oneAA" role="tabpanel">
                    <div class="row" id="machinesContainer">
                    </div>
                    <div id="machinePaginationContainer" class="d-flex justify-content-center mt-3"></div>

                </div>
                <div class="tab-pane fade" id="twoAA" role="tabpanel">
                    <div class="row" id="assemblyContainer">
                    </div>
                    <div id="assemblyPaginationContainer" class="mt-3"></div>

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

    <script>
        var machines_array = [];
        var assembly_array = [];

        $(document).ready(function () {
            const cardsPerPage = 6;
            let currentMachinePage = 1;
            let currentAssemblyPage = 1;
            let machinePages = 1;
            let assemblyPages = 1;
            let currentView = 'machine';
            const intervalTime = 50000;
            let paginationInterval;

            function fetchMachineData() {
                $.ajax({
                    url: '{{ route('machine_status.generate') }}',
                    method: 'GET',
                    success: function (response) {
                        machines_array = response.machines_array.filter(m => m.process_machine === 1);
                        assembly_array = response.machines_array.filter(m => m.process_assembly === 1);

                        machinePages = Math.max(1, Math.ceil(machines_array.length / cardsPerPage));
                        assemblyPages = Math.max(1, Math.ceil(assembly_array.length / cardsPerPage));

                        renderMachinePagination(currentMachinePage);
                        renderAssemblyPagination(currentAssemblyPage);
                        restartAutoPagination();
                    },
                    error: function (error) {
                        console.log('Error:', error);
                    }
                });
            }


            function renderCards(page, dataArray, containerSelector) {
                $(containerSelector).html('');
                const start = (page - 1) * cardsPerPage;
                const end = start + cardsPerPage;
                const currentItems = dataArray.slice(start, end);

                currentItems.forEach(item => {
                    let className = 'bg-grey';
                    if (item.machine_preperation === 'ON') className = 'bg-yellow';
                    if (item.production_status === 'ON') className = item.production?.production?.status === 'Pause' ? 'bg-grey' : 'bg-success';
                    if (item.machine_downtime === 'ON') className = 'bg-red';

                    const card = $('<div>', { class: 'col-md-4 mb-3' }).append(
                        $('<div>', { class: `card ${item.call_for_assistance ? 'border-red blink-border' : ''}` }).append(
                            $('<div>', { class: `card-header text-center p-0 pt-2 ${className}` }).append(
                                $('<h5>').text(`${item.name} (${item.code})`),
                                $('<div>', { class: 'bg-dark' }).append(
                                    $('<label>', { style: 'color: white' }).text('Machine Status:'),
                                    $('<span>', { class: item.machine_status === 'ON' ? 'text-success fw-bold' : 'text-danger fw-bold' }).html(`<b>${item.machine_status}</b>`)
                                )
                            ),
                            $('<hr>'),
                            $('<div>', { class: 'card-body' }).append(
                                createInfoRow('PRODUCTION ORDER NO:', item.production?.production?.po_no ?? 'N/A'),
                                createInfoRow('STATUS ORDER:', getStatusBadge(item)),
                                createInfoRow('PART NO:', item.production?.production?.product?.part_no ?? 'N/A'),
                                createInfoRow('PART NAME:', item.production?.production?.product?.part_name ?? 'N/A'),
                                createInfoRow('PLANNED QTY:', item.production?.production?.planned_qty ?? 'N/A'),
                                createInfoRow('PRODUCED QTY:', item.count ?? 'N/A'),
                                createInfoRow('ACTUAL UPH:', actual_uph_badge(item.actual_unit, item.badge) ?? 0)
                            ),
                            $('<div>', { class: `card-footer ${className}` })
                        )
                    );
                    $(containerSelector).append(card);
                });
            }

            function createPagination(dataArray, paginationContainerSelector, renderCallback, currentPage) {
                $(paginationContainerSelector).html('');
                const totalPages = Math.ceil(dataArray.length / cardsPerPage);

                const paginationWrapper = $('<div>', { class: 'd-flex justify-content-center align-items-center' });

                const createButton = (text, disabled, clickHandler) =>
                    $('<button>', {
                        class: `btn btn-primary mx-1 ${disabled ? 'disabled' : ''}`,
                        text: text,
                        click: clickHandler
                    });

                paginationWrapper.append(
                    createButton('First', currentPage === 1, () => renderCallback(1)),
                    createButton('Previous', currentPage === 1, () => renderCallback(currentPage - 1))
                );


                for (let i = 1; i <= totalPages; i++) {
                    paginationWrapper.append(
                        $('<button>', {
                            class: `btn btn-primary mx-1 ${i === currentPage ? 'active' : ''}`,
                            text: i,
                            click: () => renderCallback(i)
                        })
                    );
                }

                paginationWrapper.append(
                    createButton('Next', currentPage === totalPages, () => renderCallback(currentPage + 1)),
                    createButton('Last', currentPage === totalPages, () => renderCallback(totalPages))
                );

                $(paginationContainerSelector).append(paginationWrapper);
            }

            function renderMachinePagination(page) {
                currentMachinePage = page;
                renderCards(currentMachinePage, machines_array, '#machinesContainer');
                createPagination(machines_array, '#machinePaginationContainer', renderMachinePagination, currentMachinePage);
                restartAutoPagination();
            }

            function renderAssemblyPagination(page) {
                currentAssemblyPage = page;
                renderCards(currentAssemblyPage, assembly_array, '#assemblyContainer');
                createPagination(assembly_array, '#assemblyPaginationContainer', renderAssemblyPagination, currentAssemblyPage);
                restartAutoPagination();
            }

            function autoPaginate() {
                if (currentView === 'machine') {
                    if (currentMachinePage < machinePages) {
                        currentMachinePage++;
                    } else {
                        switchTab('assembly');
                        return;
                    }
                    renderMachinePagination(currentMachinePage);
                } else {
                    if (currentAssemblyPage < assemblyPages) {
                        currentAssemblyPage++;
                    } else {
                        switchTab('machine');
                        return;
                    }
                    renderAssemblyPagination(currentAssemblyPage);
                }
            }

            function switchTab(view) {
                currentView = view; 

                if (view === 'machine') {
                    new bootstrap.Tab($('#tab-oneAA')[0]).show();
                    setTimeout(() => renderMachinePagination(1), 50000);
                } else {
                    new bootstrap.Tab($('#tab-twoAA')[0]).show();
                    setTimeout(() => renderAssemblyPagination(1), 50000);
                }
            }



            function restartAutoPagination() {
                if (paginationInterval) clearInterval(paginationInterval);
                paginationInterval = setInterval(autoPaginate, intervalTime);
            }

            if (currentView === 'machine') {
                renderMachinePagination(currentMachinePage);
            } else {
                renderAssemblyPagination(currentAssemblyPage);
                new bootstrap.Tab($('#tab-twoAA')[0]).show();
            }

            restartAutoPagination();
            setInterval(fetchMachineData, 50000);


            function createInfoRow(label, value) {
                return $('<div>', { class: 'row' }).append(
                    $('<div>', { class: 'col-6' }).html(`<strong>${label}</strong>`),
                    $('<div>', { class: 'col-6' }).html(value)
                );
            }

            function actual_uph_badge(actual, badge) {
                return badge !== 0 ? `<span class="badge bg-warning">${actual ?? 0}</span>` : actual ?? 0;
            }

            function getStatusBadge(machine) {
                if (machine.production && machine.production.production) {
                    const status = machine.production.production.status;
                    return status
                        ? `<span class="badge bg-${getStatusColor(status)}">${status}</span>`
                        : '<span class="badge bg-secondary">N/A</span>';
                }
                return '<span class="badge bg-secondary">Not-initiated</span>';
            }

            function getStatusColor(status) {
                switch (status) {
                    case 'Not-initiated': return 'secondary';
                    case 'Start': return 'success';
                    case 'Pause': return 'warning';
                    case 'Completed': return 'danger';
                    case 'Checked': return 'info';
                    default: return 'secondary';
                }
            }

            fetchMachineData();
            setInterval(fetchMachineData, 15000);
        });
    </script>
@endsection