@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    <style>
        .export-btn-3d {
            position: relative;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .export-btn-3d:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .export-btn-3d:active {
            transform: translateY(-1px) scale(1.02);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .export-excel:hover {
            box-shadow: 0 8px 20px rgba(40, 167, 69, 0.4), 0 0 20px rgba(40, 167, 69, 0.2);
            border-color: #28a745 !important;
        }

        .export-pdf:hover {
            box-shadow: 0 8px 20px rgba(220, 53, 69, 0.4), 0 0 20px rgba(220, 53, 69, 0.2);
            border-color: #dc3545 !important;
        }

        .export-print:hover {
            box-shadow: 0 8px 20px rgba(108, 117, 125, 0.4), 0 0 20px rgba(108, 117, 125, 0.2);
            border-color: #6c757d !important;
        }

        .export-btn-3d:hover i {
            animation: iconBounce 0.6s ease-in-out;
        }

        @keyframes iconBounce {
            0%, 100% { transform: translateY(0); }
            50%       { transform: translateY(-3px); }
        }

        .logo-panah {
            transition: transform 0.3s ease;
        }
        .logo-panah.rotate {
            transform: rotate(180deg);
        }

        .diff-old {
            color: #dc3545;
            font-weight: 600;
            text-decoration: line-through;
            text-decoration-color: #dc3545;
        }

        .diff-new {
            color: #198754;
            font-weight: 700;
        }

        .row-changed {
            background-color: rgba(25, 135, 84, 0.06);
        }
        .row-changed:hover {
            background-color: rgba(25, 135, 84, 0.18) !important;
        }

        .badge-sap {
            background-color: rgba(220, 53, 69, 0.12);
            color: #c82333;
            border: 1px solid rgba(220, 53, 69, 0.3);
        }

        .badge-web {
            background-color: rgba(25, 135, 84, 0.12);
            color: #146c43;
            border: 1px solid rgba(25, 135, 84, 0.3);
        }

        .material-divider {
            border-left: 3px solid #0d6efd;
            padding-left: 12px;
            margin: 16px 0 8px 0;
        }

        .ps-card {
            transition: box-shadow 0.2s ease;
        }
        .ps-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }

        .ps-header {
            cursor: pointer;
            user-select: none;
        }
    </style>

    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Result {{ $title_menu }}</h5>
                            <span class="text-sm text-secondary">
                                @if (is_array($table_result) && count($table_result) > 0)
                                    {{ count($table_result) }} PS
                                @endif
                            </span>
                        </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">
                                        <a href="{{ url($url_menu) }}" class="btn btn-secondary mb-0">
                                            <i class="fas fa-circle-left me-1"></i>
                                            <span class="font-weight-bold">Kembali</span>
                                        </a>
                                    </div>
                                    <div class="col-auto align-self-center">
                                        <div class="d-flex align-items-center">
                                            <label class="text-sm font-weight-bold text-secondary me-2 mb-0">Cari :</label>
                                            <div class="input-group input-group-sm" style="width: 320px;">
                                                <input type="search" id="server-search-box" class="form-control"
                                                    placeholder="No PS / Material / Field / User..."
                                                    value="{{ $filterParams['search_all'] ?? '' }}">
                                                <button class="btn btn-outline-primary mb-0" type="button"
                                                    id="btn-search-server">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row px-4 pb-2">
                            <div class="col-lg">
                                <div class="d-flex gap-2">
                                    @if ($authorize->excel == '1')
                                        <button type="button" class="btn btn-sm btn-outline-success mb-0 export-btn-3d export-excel" id="exportAllExcel">
                                            <i class="fas fa-file-excel me-1"></i> Excel
                                        </button>
                                    @endif
                                    @if ($authorize->pdf == '1')
                                        <button type="button" class="btn btn-sm btn-outline-danger mb-0 export-btn-3d export-pdf" id="exportAllPDF">
                                            <i class="fas fa-file-pdf me-1"></i> PDF
                                        </button>
                                    @endif
                                    @if ($authorize->print == '1')
                                        <button type="button" class="btn btn-sm btn-outline-secondary mb-0 export-btn-3d export-print" id="printAll">
                                            <i class="fas fa-print me-1"></i> Print
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0 mb-3">

                        <div class="row px-4 py-2" id="real-result-container">
                            @forelse ($collapse_header as $idPs)
                                @php
                                    $psRows = $details[$idPs] ?? [];
                                    $psChangeCount = 0;
                                    foreach ($psRows as $matRows) {
                                        $psChangeCount += count($matRows);
                                    }
                                    $customerName = $ps_customer[$idPs] ?? '-';
                                    $psMatCount = count($psRows);
                                @endphp
                                <div class="card mb-3 ps-card" style="width: 100%;">
                                    <div class="card-header ps-header d-flex justify-content-between align-items-center bg-light"
                                        data-bs-toggle="collapse" data-bs-target="#ps-{{ $idPs }}">
                                        <div>
                                            <span class="badge bg-primary text-white fw-semibold me-2">NO PS : {{ $idPs }}</span>
                                             <span class="text-sm text-secondary">Customer : <strong>{{ $customerName }}</strong></span>
                                             <span class="badge bg-info text-white ms-3">{{ $psChangeCount }} perubahan</span>
                                             <span class="badge bg-dark text-white ms-2">{{ $psMatCount }} material</span>
                                        </div>
                                        <div>
                                            <span class="fas fa-circle-arrow-down text-primary logo-panah"></span>
                                        </div>
                                    </div>

                                    <div class="collapse show" id="ps-{{ $idPs }}">
                                        <div class="card-body p-0">
                                            @foreach ($psRows as $matCode => $matRows)
                                                <div class="px-4 pt-3 pb-1">
                                                    <div class="material-divider">
                                                        <strong class="text-sm text-secondary">Material:</strong>
                                                        <span class="fw-bold text-primary ms-1">{{ $matCode }}</span>
                                                        <span class="badge bg-secondary text-white ms-2">{{ count($matRows) }} field</span>
                                                    </div>
                                                </div>
                                                <div class="table-responsive px-2 pb-3">
                                                    <table class="table display table-hover mb-0" id="list_{{ $dmenu }}_{{ $idPs }}_{{ $matCode }}">
                                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                            <tr>
                                                                <th class="text-center" style="width: 40px;">No</th>
                                                                <th class="text-center">Tanggal Perubahan</th>
                                                                <th class="text-center">ID Sample</th>
                                                                <th class="text-center">Field yang Berubah</th>
                                                                <th class="text-center">Nilai Pengajuan Sample (Website)</th>
                                                                <th class="text-center">Nilai Actual (SAP)</th>
                                                                <th class="text-center">Diubah Oleh</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($matRows as $rowIndex => $row)
                                                                @php
                                                                    $oldVal = $row->old_value ?? '-';
                                                                    $newVal = $row->new_value ?? '-';
                                                                    $isChanged = $oldVal !== $newVal && $oldVal !== null && $newVal !== null && $oldVal !== '-' && $newVal !== '-';
                                                                    $isNumericOld = is_numeric(str_replace([',', '.', '-', '+'], '', $oldVal)) && $oldVal !== '-';
                                                                    $isNumericNew = is_numeric(str_replace([',', '.', '-', '+'], '', $newVal)) && $newVal !== '-';
                                                                    $oldNum = $isNumericOld ? floatval(str_replace([',', '-', '+'], '', $oldVal)) : null;
                                                                    $newNum = $isNumericNew ? floatval(str_replace([',', '-', '+'], '', $newVal)) : null;
                                                                    $compareNum = $oldNum !== null && $newNum !== null;
                                                                    $oldClass = $compareNum ? ($newNum > $oldNum ? '' : 'diff-old') : ($isChanged ? 'diff-old' : '');
                                                                    $newClass = $compareNum ? ($newNum > $oldNum ? 'diff-new' : '') : ($isChanged ? 'diff-new' : '');
                                                                @endphp
                                                                <tr class="row-changed">
                                                                    <td class="text-center">{{ $rowIndex + 1 }}</td>
                                                                    <td class="align-middle text-center">
                                                                        {{ !empty($row->changed_at) ? \Carbon\Carbon::parse($row->changed_at)->format('d-m-Y H:i') : '-' }}
                                                                    </td>
                                                                    <td class="align-middle text-center">{{ $row->id_sample ?? '-' }}</td>
                                                                    <td class="align-middle text-center">
                                                                        <span class="badge bg-secondary text-white">{{ $row->field_name }}</span>
                                                                    </td>
                                                                    <td class="align-middle text-center">
                                                                        <span class="{{ $oldClass }}">{{ $oldVal }}</span>
                                                                    </td>
                                                                    <td class="align-middle text-center">
                                                                        @if($isChanged)
                                                                            @if($compareNum)
                                                                                @if($newNum > $oldNum)
                                                                                    <span class="badge badge-sap"><i class="fas fa-arrow-up me-1"></i>{{ $newVal }}</span>
                                                                                @elseif($newNum < $oldNum)
                                                                                    <span class="badge badge-web"><i class="fas fa-arrow-down me-1"></i>{{ $newVal }}</span>
                                                                                @else
                                                                                    <span class="text-secondary">{{ $newVal }}</span>
                                                                                @endif
                                                                            @else
                                                                                <span class="{{ $newClass }}">{{ $newVal }}</span>
                                                                            @endif
                                                                        @else
                                                                            <span class="text-secondary">{{ $newVal }}</span>
                                                                        @endif
                                                                    </td>
                                                                    <td class="align-middle text-center">{{ $row->changed_by ?? 'system' }}</td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12">
                                    <div class="alert alert-info text-sm">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Tidak ada data history perubahan untuk filter yang dipilih.
                                    </div>
                                </div>
                            @endforelse

                            <form id="psPagingForm" method="POST" action="{{ URL::to($url_menu) }}">
                                @csrf
                                <input type="hidden" name="page" id="pageInput" value="{{ request('page', 1) }}">
                                @foreach ($filterParams ?? [] as $k => $v)
                                    <input type="hidden" name="{{ $k }}" value="{{ $v }}">
                                @endforeach
                            </form>

                            <div class="d-flex justify-content-between align-items-center px-4 py-2">
                                <div class="text-sm text-secondary">
                                    @if ($table_result instanceof \Illuminate\Pagination\LengthAwarePaginator)
                                        Menampilkan {{ $table_result->firstItem() ?? 0 }} - {{ $table_result->lastItem() ?? 0 }} dari {{ $table_result->total() }} PS
                                    @endif
                                </div>
                                <div>
                                    @if ($table_result instanceof \Illuminate\Pagination\LengthAwarePaginator)
                                        {{ $table_result->links('pagination::bootstrap-5') }}
                                    @endif
                                </div>
                            </div>

                        </div>

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                @if (is_array($table_result) && count($table_result) > 0)
                                    <div class="nav-wrapper">
                                        <code>Note : <i aria-hidden="true" style="color: #ffc2cd;"
                                                class="fas fa-circle"></i> Data history perubahan</code>
                                    </div>
                                @else
                                    <div class="nav-wrapper"><code>Data not found!</code></div>
                                @endif
                            </div>
                        </div>

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

    @push('js')
    <script>
        $(document).ready(function () {
            let searchTimeout;
            let currentRequest = null;

            const allTables = $('table.display');
            allTables.each(function (index) {
                const tableId = $(this).attr('id');
                if (tableId && !$.fn.DataTable.isDataTable('#' + tableId)) {
                    $('#' + tableId).DataTable({
                        "language": {
                            "search": "Cari :",
                            "lengthMenu": "Tampilkan _MENU_ baris",
                            "zeroRecords": "Maaf - Data tidak ada",
                            "info": "Data _START_ - _END_ dari _TOTAL_",
                            "infoEmpty": "Tidak ada data",
                            "infoFiltered": "(pencarian dari _MAX_ data)"
                        },
                        responsive: true,
                        paging: true,
                        ordering: true,
                        order: [[1, 'desc']]
                    });
                }
            });

            $('#btn-search-server').on('click', function () {
                performAjaxSearch($('#server-search-box').val());
            });

            $('#server-search-box').on('input', function () {
                const val = $(this).val();
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function () {
                    performAjaxSearch(val);
                }, 500);
            });

            $('#server-search-box').on('keypress', function (e) {
                if (e.which == 13) {
                    e.preventDefault();
                    performAjaxSearch($(this).val());
                }
            });

            function performAjaxSearch(val) {
                const $form = $('#psPagingForm');
                $form.find('input[name="search_all"]').remove();
                if (val.trim()) {
                    $form.append('<input type="hidden" name="search_all" value="' + val + '">');
                }
                $('#pageInput').val(1);
                const formData = $form.serialize();
                const actionUrl = $form.attr('action');
                $('#real-result-container').css('opacity', '0.5');

                if (currentRequest) currentRequest.abort();
                currentRequest = $.ajax({
                    url: actionUrl,
                    type: 'POST',
                    data: formData,
                    success: function (response) {
                        const newContent = $('<div>').html(response).find('#real-result-container').html();
                        if (newContent) {
                            $('#real-result-container').html(newContent);
                            const $tbl = $(newContent).find('table.display');
                            if ($tbl.length) {
                                $tbl.each(function () {
                                    const tid = $(this).attr('id');
                                    if (tid && !$.fn.DataTable.isDataTable('#' + tid)) {
                                        $('#' + tid).DataTable({
                                            "language": {
                                                "search": "Cari :",
                                                "lengthMenu": "Tampilkan _MENU_ baris",
                                                "zeroRecords": "Maaf - Data tidak ada",
                                                "info": "Data _START_ - _END_ dari _TOTAL_",
                                                "infoEmpty": "Tidak ada data",
                                                "infoFiltered": "(pencarian dari _MAX_ data)"
                                            },
                                            responsive: true,
                                            paging: true,
                                            ordering: true,
                                            order: [[1, 'desc']]
                                        });
                                    }
                                });
                            }
                        }
                        $('#real-result-container').css('opacity', '1');
                    },
                    error: function (xhr) {
                        if (xhr.statusText !== 'abort') {
                            $('#real-result-container').css('opacity', '1');
                        }
                    }
                });
            }

            $('#exportAllExcel').on('click', function () { exportAllData('excel'); });
            $('#exportAllPDF').on('click', function () { exportAllData('pdf'); });
            $('#printAll').on('click', function () { exportAllData('print'); });

            function exportAllData(type) {
                const btnMap = { excel: '#exportAllExcel', pdf: '#exportAllPDF', print: '#printAll' };
                const $btn = $(btnMap[type]);
                const orig = $btn.html();
                $btn.html('<i class="fas fa-spinner fa-spin me-1"></i> Processing...').prop('disabled', true);

                $.ajax({
                    url: $('#psPagingForm').attr('action'),
                    type: 'POST',
                    data: $('#psPagingForm').serialize() + '&export_type=' + type,
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success: function (response) {
                        if (response.success && response.data && response.data.length > 0) {
                            processExport(type, response.data);
                        } else {
                            Swal.fire('Info', 'Tidak ada data untuk diekspor.', 'info');
                        }
                    },
                    error: function () {
                        Swal.fire('Error', 'Gagal mengambil data ekspor.', 'error');
                    },
                    complete: function () {
                        $btn.html(orig).prop('disabled', false);
                    }
                });
            }

            function processExport(type, data) {
                const columns = [
                    { key: 'no', header: 'No' },
                    { key: 'id_ps', header: 'No PS' },
                    { key: 'id_sample', header: 'ID Sample' },
                    { key: 'material_code', header: 'Kode Material' },
                    { key: 'field_name', header: 'Field yang Berubah' },
                    { key: 'old_value', header: 'Nilai SAP (Lama)' },
                    { key: 'new_value', header: 'Nilai Website (Baru)' },
                    { key: 'changed_at', header: 'Tanggal Perubahan', render: (r) => r.changed_at ? new Date(r.changed_at).toLocaleString('id-ID') : '-' },
                    { key: 'changed_by', header: 'Diubah Oleh' }
                ];

                const tempId = 'tmpTbl_' + Date.now();
                let html = '<table id="' + tempId + '" class="display" style="display:none;"><thead><tr>';
                columns.forEach(function (c) { html += '<th>' + c.header + '</th>'; });
                html += '</tr></thead><tbody>';

                data.forEach(function (row, i) {
                    html += '<tr>';
                    columns.forEach(function (c) {
                        const val = c.key === 'no' ? (i + 1) : (c.render ? c.render(row) : (row[c.key] ?? ''));
                        html += '<td>' + $('<div>').text(String(val ?? '')).html() + '</td>';
                    });
                    html += '</tr>';
                });

                html += '</tbody></table>';
                $('body').append(html);

                const dt = $('#' + tempId).DataTable({
                    dom: 'Bfrtip',
                    paging: false, ordering: false, searching: false,
                    buttons: [{
                        extend: type === 'excel' ? 'excelHtml5' : (type === 'pdf' ? 'pdfHtml5' : 'print'),
                        title: 'History Perubahan SAP vs Website - Staf Lab',
                        filename: 'HistChg_SAP_Web_' + new Date().toISOString().slice(0, 10),
                        orientation: type === 'pdf' ? 'landscape' : 'portrait',
                        pageSize: type === 'pdf' ? 'A3' : 'A4'
                    }]
                });

                setTimeout(function () {
                    try {
                        dt.button(0).trigger();
                        setTimeout(function () { dt.destroy(); $('#' + tempId).remove(); }, 2000);
                    } catch (err) {
                        Swal.fire('Error', 'Export gagal: ' + err.message, 'error');
                    }
                }, 500);
            }

            $(document).on('shown.bs.collapse', '.collapse', function () {
                const $table = $(this).find('table.display');
                if ($table.length > 0) {
                    const tableId = $table.attr('id');
                    if ($.fn.DataTable.isDataTable('#' + tableId)) {
                        $('#' + tableId).DataTable().columns.adjust().responsive.recalc();
                    }
                }
            });

            $(document).on('click', '.pagination a', function (e) {
                e.preventDefault();
                const href = $(this).attr('href');
                if (!href) return;
                const page = new URL(href, window.location.origin).searchParams.get('page') || 1;
                $('#pageInput').val(page);
                $('#psPagingForm').submit();
            });

            document.addEventListener('DOMContentLoaded', function () {
                document.querySelectorAll('.collapse').forEach(function (collapseEl) {
                    const header = collapseEl.previousElementSibling;
                    const arrow = header ? header.querySelector('.logo-panah') : null;
                    if (!arrow) return;
                    collapseEl.addEventListener('show.bs.collapse', function () {
                        arrow.classList.add('rotate');
                    });
                    collapseEl.addEventListener('hide.bs.collapse', function () {
                        arrow.classList.remove('rotate');
                    });
                });
            });
        });
    </script>
    @endpush
@endsection