@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
<style>
    /* Border dasar semua cell */
    #list_ {
            {
            $dmenu
        }
    }

    td,
    #list_ {
            {
            $dmenu
        }
    }

    th {
        border-top: 1px solid #dee2e6 !important;
        border-bottom: 1px solid #dee2e6 !important;
        border-left: 1px solid #dee2e6 !important;
        border-right: 1px solid #dee2e6 !important;
    }

    /* Cell ter-merge: background beda, nilai di tengah */
    #list_ {
            {
            $dmenu
        }
    }

    td[rowspan] {
        background-color: #f8f9fa;
        vertical-align: middle !important;
        text-align: center !important;
    }

    /* Garis tebal pemisah antar grup No PR */
    #list_ {
            {
            $dmenu
        }
    }

    tr.group-top td {
        border-top: 1px solid #dee2e6 !important;
    }

    #list_ {
            {
            $dmenu
        }
    }

    tr.nopr-top td {
        border-top: 1px dashed #adb5bd !important;
    }
</style>
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row mx-1">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">Result {{ $title_menu }}</h5>
                    </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">
                                    <button class="btn btn-secondary mb-0" onclick="history.back()">
                                        <i class="fas fa-circle-left me-1"></i>
                                        <span class="font-weight-bold">Kembali</span>
                                    </button>
                                </div>
                                <div class="col-md-3 md-auto justify-content-end row">
                                    <div class="col">
                                                                                @foreach ($filter as $key => $value)
                                        <input type="hidden" name="f{{ $key }}" value="{{ $value }}" />
                                        @php
                                        if (
                                        preg_replace('/\s+/', '', strtolower(@$table_class->alias)) ==
                                        preg_replace('/\s+/', '', strtolower($key))
                                        ) {
                                        $check_filter = $value == '%' ? '' : $value;
                                        }
                                        @endphp
                                        @endforeach
                                    </div>
                                    <div class="col">
                                        Filter {{ @$table_class->alias }} :
                                        <select class="form-select" id="{{ @$table_class->field }}" style="width: 150px;">
                                            @if (@$table_class->query != '')
                                            @if ($check_filter != '')
                                            @php $data_query = DB::select(@$table_class->query); @endphp
                                            @foreach ($data_query as $q)
                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjvendor/resources/views/report/rprepo/result.blade.php</b> on line <b>100</b><br />
                                            @if ($check_filter == $sAsArray[0])
                                            <option value="{{ $sAsArray[0] }}">{{ $sAsArray[0] }} - {{ $sAsArray[1] }}</option>
                                            @endif
                                            @endforeach
                                            @else
                                            <option value="" selected>% - All</option>
                                            @php $data_query = DB::select(@$table_class->query); @endphp
                                            @foreach ($data_query as $q)
                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjvendor/resources/views/report/rprepo/result.blade.php</b> on line <b>109</b><br />
                                            <option value="{{ $sAsArray[0] }}">{{ $sAsArray[0] }} - {{ $sAsArray[1] }}</option>
                                            @endforeach
                                            @endif
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            {{--
                                    CATATAN PENTING:
                                    - Class "display" SENGAJA TIDAK dipakai di sini.
                                      Layout global biasanya init DataTables via $('table.display').DataTable()
                                      sehingga tabel ini tidak akan tertangkap init global tersebut.
                                    - DataTables di-init manual di @push('js') SETELAH merge cell selesai,
                                      dengan paging/ordering/searching = false agar rowspan tidak rusak.
                                --}}
                            <table class="table table-bordered" id="list_{{ $dmenu }}" style="width:100%">
                                @if ($table_result)
                                @php
                                $columns = array_keys((array) $table_result[0]);
                                @endphp
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>No</th>
                                        @foreach ($columns as $header)
                                        @if (substr($header, 0, 3) == 'IMG')
                                        <th>{{ substr($header, 4) }}</th>
                                        @elseif (substr($header, 0, 3) == 'CDT')
                                        <th>{{ substr($header, 6) . '-' . substr($header, 3, 2) }}</th>
                                        @elseif (substr($header, 0, 3) == 'CST')
                                        <th>{{ substr($header, 4) }}</th>
                                        @else
                                        <th>{{ $header }}</th>
                                        @endif
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($table_result as $rowIndex => $detail)
                                    @php $rowArr = (array) $detail; @endphp
                                    <tr {{ @$detail->isactive == '0' || @$detail->ISACTIVE == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                        {{-- Kolom No TIDAK di-merge --}}
                                        <td class="text-sm text-center" style="vertical-align:middle;">{{ $loop->iteration }}</td>

                                        @foreach ($columns as $header)
                                        @php
                                        $string = $header;
                                        $cellVal = $rowArr[$string] ?? '';
                                        $img_id = substr(str_shuffle('abcdefghijklmnopqrstuvwxyz'), 0, 10);
                                        @endphp

                                        @if (substr($string, 0, 3) == 'IMG')
                                        <td class="text-sm font-weight-normal" style="vertical-align:middle;">
                                            <span class="my-2 text-xs">
                                                <img src="{{ asset('/storage/' . $cellVal) }}" alt="image" style="height:40px;"
                                                    data-bs-toggle="modal" data-bs-target="#{{ $img_id }}">
                                            </span>
                                            <div class="modal fade" id="{{ $img_id }}" tabindex="-1" role="dialog" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Preview Image</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <img src="{{ asset('/storage/' . $cellVal) }}" alt="image" class="w-100 border-radius-lg shadow-sm">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        @elseif (substr($string, 0, 3) == 'CDT')
                                        <td class="text-sm font-weight-normal {{ $cellVal }}" style="vertical-align:middle;">{{ $cellVal }}</td>
                                        <script>
                                            (function() {
                                                var d = new Date('{{ $cellVal }}'),
                                                    now = new Date();
                                                now.setDate(now.getDate() + parseInt('{{ substr($string, 3, 2) }}'));
                                                if (d <= now) {
                                                    $('.{{ $cellVal }}').closest('tr').addClass('exp').css('background-color', '#ffe768');
                                                }
                                            })();
                                        </script>
                                        @elseif (substr($string, 0, 3) == 'CST')
                                        <td class="text-sm font-weight-normal {{ $cellVal }}" style="vertical-align:middle;">{{ $cellVal }}</td>
                                        <script>
                                            (function() {
                                                if ('{{ $cellVal }}' === 'FALSE') {
                                                    $('.FALSE').closest('tr').addClass('stock').css({
                                                        'background-color': '#f93c3c',
                                                        'color': '#000'
                                                    });
                                                }
                                            })();
                                        </script>
                                        @else
                                        <td class="text-sm font-weight-normal" style="vertical-align:middle;">{{ $cellVal }}</td>
                                        @endif
                                        @endforeach
                                    </tr>
                                    @endforeach
                                </tbody>
                                @endif
                            </table>
                        </div>
                    </div>

                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            @if ($table_result)
                            <div class="nav-wrapper" id="noted">
                                <code>Note : <i style="color:#ffc2cd;" class="fas fa-circle"></i> Data not active</code>
                            </div>
                            @else
                            <div class="nav-wrapper"><code>Data not found!</code></div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if ($jsmenu == '1')
@if (view()->exists("js.{$dmenu}"))
@push('addjs')
@include('js.' . $dmenu);
@endpush
@else
@push('addjs')
<script>
    Swal.fire({
        title: 'JS Not Found!!',
        text: 'Please Create File JS',
        icon: 'error',
        confirmButtonColor: '#028284'
    });
</script>
@endpush
@endif
@endif
@endsection

@push('js')
<script>
    $(document).ready(function() {
        setTimeout(function() {
            initRprepoTable();
        }, 0);
    });

    function initRprepoTable() {
        var tableId = 'list_{{ $dmenu }}';
        var $table = $('#' + tableId);
        if ($table.length === 0) return;

        // ── STEP 1: Destroy instance DataTables yang sudah ada ───────────────
        if ($.fn.DataTable.isDataTable('#' + tableId)) {
            $table.DataTable().destroy();
        }

        // ── STEP 2: Init DataTables dengan initComplete callback ─────────────
        $table.DataTable({
            paging: false,
            ordering: false,
            searching: false,
            info: false,
            responsive: false,
            retrieve: true,
            scrollX: true,
            dom: 'Bt',
            buttons: [{
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel',
                    autoFilter: true,
                    sheetName: 'Exported data',
                    exportOptions: {
                        columns: ':visible'
                    },
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    exportOptions: {
                        columns: ':visible'
                    },
                },
                {
                    extend: 'print',
                    text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    exportOptions: {
                        columns: ':visible'
                    },
                },
            ],
            // ── KUNCI: merge cell dijalankan SETELAH DataTables render DOM ───
            initComplete: function() {
                doMergeCell(tableId);
                styleButtons();
                initFilterDropdown();
                updateNotes();
            }
        });
    }

    // ── MERGE CELL ───────────────────────────────────────────────────────────
    function doMergeCell(tblId) {
        var tableEl = document.getElementById(tblId);
        if (!tableEl) return;

        var tbody = tableEl.querySelector('tbody');
        if (!tbody) return;

        var domRows = Array.from(tbody.querySelectorAll('tr'));
        var numRows = domRows.length;
        var theadRow = tableEl.querySelector('thead tr');
        var numCols = theadRow ? theadRow.querySelectorAll('th').length : 0;

        if (numRows === 0 || numCols === 0) return;

        // ── Bangun matrix 2D dari DOM ASLI sebelum apapun diubah ─────────────
        var matrix = [];
        for (var r = 0; r < numRows; r++) {
            matrix[r] = [];
            var cells = domRows[r].querySelectorAll('td');
            for (var c = 0; c < numCols; c++) {
                matrix[r][c] = {
                    el: cells[c] || null,
                    text: cells[c] ? cells[c].innerText.trim() : '',
                    hidden: false,
                    rowspan: 1
                };
            }
        }

        var headerCells = theadRow.querySelectorAll('th');

        // ── FORMAT PRICE ──────────────────────────────────────────────────────
        var priceColIndex = -1;
        for (var i = 0; i < headerCells.length; i++) {
            if (headerCells[i].innerText.trim().toLowerCase() === 'price') {
                priceColIndex = i;
                break;
            }
        }
        if (priceColIndex >= 0) {
            for (var r = 0; r < numRows; r++) {
                var cell = matrix[r][priceColIndex];
                if (cell && cell.el && cell.text !== '') {
                    var raw = cell.text.replace(/[^0-9.]/g, '');
                    var num = parseFloat(raw);
                    if (!isNaN(num)) {
                        var formatted = num.toLocaleString('id-ID', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        });
                        cell.el.innerText = formatted;
                        cell.text = formatted;
                    }
                }
            }
        }

        // ── Tentukan index kolom penting ──────────────────────────────────────
        var vendorColIndex = -1;
        var noPrColIndex = -1;
        var noMergeBlankCols = [];

        for (var i = 0; i < headerCells.length; i++) {
            var hText = headerCells[i].innerText.trim().toLowerCase();
            if (hText === 'sap code vendor') vendorColIndex = i;
            if (hText === 'no pr') noPrColIndex = i;
            if (hText === 'no' || hText === 'no pr' || hText === 'no item') {
                noMergeBlankCols.push(i);
            }
        }
        if (vendorColIndex < 0) vendorColIndex = 4; // fallback sesuai urutan kolom

        // ── Buat array vendor & No PR per baris dari nilai ASLI (sebelum merge) ─
        // Ini penting karena setelah merge, cell yang hidden akan kosong
        var vendorPerRow = [];
        var noPrPerRow = [];
        var lastVendor = '';
        var lastNoPr = '';

        for (var r = 0; r < numRows; r++) {
            var vText = matrix[r][vendorColIndex] ? matrix[r][vendorColIndex].text : '';
            var pText = (noPrColIndex >= 0 && matrix[r][noPrColIndex]) ? matrix[r][noPrColIndex].text : '';

            if (vText !== '') lastVendor = vText;
            if (pText !== '') lastNoPr = pText;

            vendorPerRow[r] = lastVendor;
            noPrPerRow[r] = lastNoPr;
        }

        // ── Tentukan GRUP berdasarkan vendor ──────────────────────────────────
        var grupOf = [];
        var grupNum = 0;
        grupOf[0] = 0;
        for (var r = 1; r < numRows; r++) {
            if (vendorPerRow[r] !== vendorPerRow[r - 1]) grupNum++;
            grupOf[r] = grupNum;
        }

        // ── Merge per kolom ───────────────────────────────────────────────────
        for (var col = 1; col < numCols; col++) {
            var isKeyCol = noMergeBlankCols.indexOf(col) >= 0;
            var r = 0;

            while (r < numRows) {
                if (!matrix[r][col] || !matrix[r][col].el || matrix[r][col].hidden) {
                    r++;
                    continue;
                }

                var span = 1;
                var topText = matrix[r][col].text;
                var topGrup = grupOf[r];
                var next = r + 1;

                while (next < numRows) {
                    if (!matrix[next][col] || !matrix[next][col].el) break;

                    // STOP jika beda grup vendor
                    if (grupOf[next] !== topGrup) break;

                    var nextText = matrix[next][col].text;

                    // STOP jika nilai berbeda dan tidak kosong
                    if (nextText !== topText && nextText !== '') break;

                    // STOP jika kosong dan kolom kunci
                    if (nextText === '' && isKeyCol) break;

                    matrix[next][col].hidden = true;
                    matrix[next][col].el.style.display = 'none';
                    span++;
                    next++;
                }

                if (span > 1) {
                    matrix[r][col].el.setAttribute('rowspan', span);
                    matrix[r][col].rowspan = span;
                    matrix[r][col].el.style.verticalAlign = 'middle';
                    matrix[r][col].el.style.textAlign = 'center';
                }

                r = next;
            }
        }

        // ── Tambahkan class border berdasarkan ganti vendor & ganti No PR ─────
        for (var r = 0; r < numRows; r++) {
            var isFirstInVendor = (r === 0) || (vendorPerRow[r] !== vendorPerRow[r - 1]);
            var isFirstInNoPr = (r > 0) && !isFirstInVendor && (noPrPerRow[r] !== noPrPerRow[r - 1]);

            if (isFirstInVendor) {
                domRows[r].classList.add('group-top');
            } else if (isFirstInNoPr) {
                domRows[r].classList.add('nopr-top');
            }
        }

        // ── Border bawah tiap cell yang tidak di-merge ────────────────────────
        for (var r = 0; r < numRows; r++) {
            for (var c = 0; c < numCols; c++) {
                if (matrix[r][c] && matrix[r][c].el && !matrix[r][c].hidden) {
                    if ((matrix[r][c].rowspan || 1) === 1) {
                        matrix[r][c].el.style.borderBottom = '1px solid #dee2e6';
                    }
                }
            }
        }
    }

    // ── STYLE BUTTON DataTables ───────────────────────────────────────────────
    function styleButtons() {
        $('.dt-button').addClass('btn btn-secondary').removeClass('dt-button');
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/report/rprepo/result.blade.php</b> on line <b>499</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/report/rprepo/result.blade.php</b> on line <b>499</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/report/rprepo/result.blade.php</b> on line <b>500</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/report/rprepo/result.blade.php</b> on line <b>500</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjvendor/resources/views/report/rprepo/result.blade.php</b> on line <b>501</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjvendor/resources/views/report/rprepo/result.blade.php</b> on line <b>501</b><br />
    }

    // ── FILTER DROPDOWN PO STATUS → POST ke controller ────────────────────────
    function initFilterDropdown() {
        $('#{{ @$table_class->field }}').off('change').on('change', function() {
            var params = {};
            $('input[name^="f"]').each(function() {
                params[$(this).attr('name').replace(/^f/, '')] = $(this).val();
            });
            params['po_status'] = $(this).val();

            var form = $('<form method="POST" action="{{ url()->current() }}"></form>');
            form.append('<input type="hidden" name="_token" value="{{ csrf_token() }}">');
            $.each(params, function(k, v) {
                form.append('<input type="hidden" name="' + k + '" value="' + v + '">');
            });
            $('body').append(form);
            form.submit();
        });
    }

    // ── UPDATE CATATAN NOTE ───────────────────────────────────────────────────
    function updateNotes() {
        var hasExp = $('*').hasClass('exp');
        var hasStock = $('*').hasClass('stock');

        if (hasExp && hasStock) {
            $('#noted').html('<code>Note : ( <i style="color:#ffc2cd;" class="fas fa-circle"></i> Data not active ), ( <i style="color:#ffe768;" class="fas fa-circle"></i> Data Expired ), ( <i style="color:#f93c3c;" class="fas fa-circle"></i> Stock &lt; Min Stock )</code>');
        } else if (hasExp) {
            $('#noted').html('<code>Note : ( <i style="color:#ffc2cd;" class="fas fa-circle"></i> Data not active ), ( <i style="color:#ffe768;" class="fas fa-circle"></i> Data Expired )</code>');
        } else if (hasStock) {
            $('#noted').html('<code>Note : ( <i style="color:#ffc2cd;" class="fas fa-circle"></i> Data not active ), ( <i style="color:#f93c3c;" class="fas fa-circle"></i> Stock &lt; Min Stock )</code>');
        }
    }

    function deleteData(name, msg) {
        return confirm('Apakah Anda Yakin ' + msg + ' Data ' + name + ' ini ?');
    }
</script>
@endpush