@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@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="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                {{-- alert --}}
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    {{-- check authorize add --}}
                                    @if ($authorize->add == '1')
                                        {{-- button add --}}
                                        <button class="btn btn-primary mb-0"
                                            onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                                class="fas fa-plus me-1"> </i><span class="font-weight-bold">
                                                Tambah</button>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th></th>
                                            <th>No</th>
                                            <th>Action</th>
                                            {{-- retrieve table header --}}
                                            @foreach ($table_header as $header)
                                                <th>{{ $header->alias }}</th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- retrieve table detail --}}
                                        @foreach ($table_detail as $detail)
                                            @php
                                                $vcount = $loop->iteration;
                                                $primary = $table_primary->field;
                                            @endphp
                                            <tr
                                                {{ $detail->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                                <td class="text-center">
                                                    @php
                                                        // Kumpulan detail (aman untuk null/array/collection)
                                                        $items = collect(
                                                            \DB::table('trs_ps_d')
                                                                ->where('id_ps', $detail->id_ps)
                                                                ->get(),
                                                        );

                                                        // Semua item harus terisi (0 / '0' dianggap TERISI dengan filled())
                                                        $allFilled =
                                                            $items->isNotEmpty() &&
                                                            $items->every(function ($d) {
                                                                return filled(data_get($d, 'id_memo')) &&
                                                                    filled(data_get($d, 'id_app')) &&
                                                                    filled(data_get($d, 'id_detail'));
                                                            });

                                                        // Hanya tampilkan checkbox bila status = draft (case-insensitive)
                                                        $status = strtolower((string) data_get($detail, 'status', ''));
                                                        $isDraft = $status === 'draft';

                                                        // Nilai checkbox + status awal (restore dari old input)
                                                        $primaryKey = $table_primary->field ?? 'id';
                                                        $val = data_get($detail, $primaryKey);
                                                        $checked = in_array($val, old('selected_ids', []), true);
                                                    @endphp

                                                    @if ($isDraft)
                                                        <input type="checkbox" name="selected_ids[]"
                                                            value="{{ $val }}"
                                                            class="row-checkbox {{ $allFilled ? '' : 'row-checkbox--blocked' }}"
                                                            data-allowed="{{ $allFilled ? '1' : '0' }}"
                                                            title="{{ $allFilled ? '' : 'Lengkapi id_memo, id_app, id_detail' }}">
                                                    @else
                                                        <span class="text-muted"></span>
                                                    @endif

                                                </td>
                                                <td></td>
                                                {{-- <td>{{ $vcount }}</td> --}}
                                                <td class="text-sm font-weight-normal">
                                                    <div class="btn-group">
                                                        <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                            title="View Data"
                                                            onclick="window.location='{{ url($url_menu . '/show' . '/' . encrypt($detail->$primary)) }}'">
                                                            <i class="fas fa-eye"> </i><span class="font-weight-bold"> View
                                                        </button>
                                                        <button type="button"
                                                            class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="visually-hidden">Toggle Dropdown</span>
                                                        </button>
                                                        <ul class="dropdown-menu">
                                                            {{-- check authorize edit --}}
                                                            @if ($authorize->edit == '1')
                                                                {{-- check status active --}}
                                                                @if ($detail->isactive == 1)
                                                                    {{-- button edit --}}
                                                                    <li>
                                                                        <hr class="dropdown-divider">
                                                                    </li>
                                                                    <button type="button"
                                                                        class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                                        title="Edit Data"
                                                                        onclick="window.location='{{ url($url_menu . '/edit' . '/' . encrypt($detail->$primary)) }}'">
                                                                        <i class="fas fa-edit"></i><span
                                                                            class="font-weight-bold">
                                                                            Edit</span>
                                                                    </button>
                                                                    {{-- button selesai --}}
                                                                    <li>
                                                                        <hr class="dropdown-divider">
                                                                    </li>
                                                                    <button
                                                                        id="pengajuan-selesai-btn-{{ $detail->$primary }}"
                                                                        class="btn btn-sm btn-success mx-2 mb-0 w-90"
                                                                        data-id="{{ encrypt($detail->$primary) }}"
                                                                        data-url="{{ url($url_menu) }}">
                                                                        <i class="fas fa-square-check"></i><span
                                                                            class="font-weight-bold">
                                                                            Selesai</span>
                                                                    </button>
                                                                    {{-- button print pdf --}}
                                                                    <li>
                                                                        <hr class="dropdown-divider">
                                                                    </li>
                                                                    <button type="button"
                                                                        class="btn btn-sm btn-info mx-2 mb-0 w-90 print-pdf-btn"
                                                                        title="Print PDF" data-id="{{ $detail->$primary }}"
                                                                        data-detail='@json($detail)'>
                                                                        <i class="fas fa-print"></i><span
                                                                            class="font-weight-bold">
                                                                            PDF</span>
                                                                    </button>
                                                                @endif
                                                            @endif
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                                @foreach ($table_header as $field)
                                                    @php
                                                        $string = $field->field;
                                                    @endphp
                                                    {{-- field type enum --}}
                                                    @if ($field->type == 'enum')
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                            @if ($field->link != '')
                                                                <a target="_blank"
                                                                    href="{{ url($field->link . '/?id=' . encrypt($detail->$string)) }}">
                                                                    @if ($field->query != '')
                                                                        @php
                                                                            $data_query = DB::select($field->query);
                                                                        @endphp
                                                                        @foreach ($data_query as $q)
                                                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjsample/resources/views/sample/trupdh/list.blade.php</b> on line <b>176</b><br />
                                                                            {{ $detail->$string == $sAsArray[0] ? $sAsArray[1] : '' }}
                                                                        @endforeach
                                                                    @endif
                                                                    &nbsp;&nbsp;
                                                                    <i aria-hidden="true" class="fas fa-external-link-alt">
                                                                    </i>
                                                                </a>
                                                            @else
                                                                @if ($field->query != '')
                                                                    @php
                                                                        $data_query = DB::select($field->query);
                                                                    @endphp
                                                                    @if (Str::contains($field->class, 'select-multiple'))
                                                                        <br />
<b>Warning</b>:  Undefined variable $detail in <b>/opt/lampp/htdocs/msjsample/resources/views/sample/trupdh/list.blade.php</b> on line <b>191</b><br />
<br />
<b>Warning</b>:  Undefined variable $string in <b>/opt/lampp/htdocs/msjsample/resources/views/sample/trupdh/list.blade.php</b> on line <b>191</b><br />
<br />
<b>Warning</b>:  Attempt to read property "" on null in <b>/opt/lampp/htdocs/msjsample/resources/views/sample/trupdh/list.blade.php</b> on line <b>191</b><br />
                                                                        @foreach ($data_query as $q)
                                                                            @php
                                                                                $sAsArray = array_values((array) $q);
                                                                                if (in_array($sAsArray[0], $multiple)) {
                                                                                    if ($text == '') {
                                                                                        $text = $sAsArray[1];
                                                                                    } else {
                                                                                        $text =
                                                                                            $text . ',' . $sAsArray[1];
                                                                                    }
                                                                                }
                                                                            @endphp
                                                                        @endforeach
                                                                        {{ $text }}
                                                                    @else
                                                                        @foreach ($data_query as $q)
                                                                            <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjsample/resources/views/sample/trupdh/list.blade.php</b> on line <b>210</b><br />
                                                                            {{ $detail->$string == $sAsArray[0] ? $sAsArray[1] : '' }}
                                                                        @endforeach
                                                                    @endif
                                                                @endif
                                                            @endif
                                                        </td>
                                                        {{-- field type file --}}
                                                    @elseif ($field->type == 'file')
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                            @if ($detail->$string)
                                                                <a target="_blank"
                                                                    class="btn btn-sm btn-outline-success mb-0 py-1 px-2"
                                                                    href="{{ asset('/storage' . '/' . $detail->$string) }}">
                                                                    <i aria-hidden="true" class="fas fa-file-lines text-lg">
                                                                    </i>
                                                                    {{ $field->alias }}</a>
                                                            @endif
                                                        </td>
                                                        {{-- field type image --}}
                                                    @elseif($field->type == 'image')
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                            <span class="my-2 text-xs">
                                                                <img src="{{ file_exists(public_path('storage/' . $detail->$string . 'tumb.png')) ? asset('/storage' . '/' . $detail->$string . 'tumb.png') : asset('storage/' . $detail->$string) }}"
                                                                    alt="image" style="height: 35px;"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#imageModal{{ $field->field }}{{ $vcount }}">
                                                            </span>
                                                            <span
                                                                style="display: none;">{{ asset('/storage' . '/' . $detail->$string) }}
                                                            </span>
                                                            <!-- Modal -->
                                                            <div class="modal fade"
                                                                id="imageModal{{ $field->field }}{{ $vcount }}"
                                                                tabindex="-1" role="dialog"
                                                                aria-labelledby="imageModalLabel" aria-hidden="true">
                                                                <div class="modal-dialog modal-dialog-centered"
                                                                    role="document">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title" id="imageModalLabel">
                                                                                Preview Image
                                                                            </h5>
                                                                            <button type="button" class="btn-close"
                                                                                data-bs-dismiss="modal"
                                                                                aria-label="Close">
                                                                                <span aria-hidden="true">&times;</span>
                                                                            </button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <img src="{{ asset('/storage' . '/' . $detail->$string) }}"
                                                                                id="preview" alt="image"
                                                                                class="w-100 border-radius-lg shadow-sm">
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        {{-- field type join --}}
                                                    @elseif($field->type == 'join')
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                            @if ($field->query != '')
                                                                @php
                                                                    $query =
                                                                        $field->query . "'" . $detail->$string . "'";
                                                                    $data_query = DB::select($query);
                                                                @endphp
                                                                @foreach ($data_query as $q)
                                                                    <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjsample/resources/views/sample/trupdh/list.blade.php</b> on line <b>283</b><br />
                                                                    @if ($field->default != 'image')
                                                                        {{ $sAsArray[0] != '' ? $sAsArray[0] : '' }}
                                                                    @else
                                                                        <span class="my-2 text-xs">
                                                                            <img src="{{ asset('/storage' . '/' . $sAsArray[0]) }}"
                                                                                alt="image" style="height: 40px;"
                                                                                data-bs-toggle="modal"
                                                                                data-bs-target="#imageModalJoin{{ $field->field }}{{ $vcount }}">
                                                                        </span>
                                                                        <span
                                                                            style="display: none;">{{ asset('/storage' . '/' . $sAsArray[0]) }}
                                                                        </span>
                                                                        <!-- Modal -->
                                                                        <div class="modal fade"
                                                                            id="imageModalJoin{{ $field->field }}{{ $vcount }}"
                                                                            tabindex="-1" role="dialog"
                                                                            aria-labelledby="imageModalJoinLabel"
                                                                            aria-hidden="true">
                                                                            <div class="modal-dialog modal-dialog-centered"
                                                                                role="document">
                                                                                <div class="modal-content">
                                                                                    <div class="modal-header">
                                                                                        <h5 class="modal-title"
                                                                                            id="imageModalJoinLabel">
                                                                                            Preview Image
                                                                                        </h5>
                                                                                        <button type="button"
                                                                                            class="btn-close"
                                                                                            data-bs-dismiss="modal"
                                                                                            aria-label="Close">
                                                                                            <span
                                                                                                aria-hidden="true">&times;</span>
                                                                                        </button>
                                                                                    </div>
                                                                                    <div class="modal-body">
                                                                                        <img src="{{ asset('/storage' . '/' . $sAsArray[0]) }}"
                                                                                            id="preview" alt="image"
                                                                                            class="w-100 border-radius-lg shadow-sm">
                                                                                    </div>
                                                                                    <div class="modal-footer">
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                        </td>
                                                        {{-- field type currency --}}
                                                    @elseif ($field->type == 'currency')
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                            {{ $format->CurrencyFormat($detail->$string, $field->decimals, $field->sub) }}
                                                        </td>
                                                        {{-- field type date --}}
                                                    @elseif ($field->type == 'date')
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }} {{ $field->class == 'check-date' ? $detail->$string : '' }}">
                                                            {{ $detail->$string }}
                                                        </td>
                                                        @if ($field->note != '')
                                                            <p id="datenote" style="display: none">
                                                                {{ $field->note }}
                                                            </p>
                                                        @else
                                                            <p id="datenote" style="display: none">Date Expired <=
                                                                    {{ $field->length }} Day </p>
                                                        @endif
                                                        @if ($field->class == 'check-date')
                                                            <script>
                                                                var inputDate = new Date('{{ $detail->$string }}');
                                                                var currentDate = new Date();
                                                                var futureDate = new Date(currentDate.setDate(currentDate.getDate() + parseInt('{{ $field->length }}')));

                                                                if (inputDate <= futureDate) {
                                                                    $('.{{ $detail->$string }}').parents('tr').addClass('exp');
                                                                    $('.{{ $detail->$string }}').parents('tr').css('background-color', '#ffe768');
                                                                }
                                                            </script>
                                                        @endif
                                                    @elseif ($field->type == 'number')
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }} {{ $field->class == 'check-stock' ? $detail->$string . $detail->{$field->sub} : '' }}">
                                                            {{ $detail->$string }}
                                                        </td>
                                                        @if ($field->note != '')
                                                            <p id="stocknote" style="display: none">
                                                                {{ $field->note }}
                                                            </p>
                                                        @else
                                                            <p id="stocknote" style="display: none">Stock < minimal stock
                                                                    </p>
                                                        @endif
                                                        @if ($field->class == 'check-stock')
                                                            <script>
                                                                var vstock = {
                                                                    {
                                                                        $detail - > $string
                                                                    }
                                                                };
                                                                var vminstock = {
                                                                    {
                                                                        $detail - > {
                                                                            $field - > sub
                                                                        }
                                                                    }
                                                                };

                                                                if (vstock < vminstock) {
                                                                    $('.{{ $detail->$string . $detail->{$field->sub} }}').parents('tr').addClass('stock');
                                                                    $('.{{ $detail->$string . $detail->{$field->sub} }}').parents('tr').css('background-color', '#f93c3c');
                                                                    $('.{{ $detail->$string . $detail->{$field->sub} }}').parents('tr').css('color', '#000');
                                                                }
                                                            </script>
                                                        @endif
                                                    @else
                                                        <td
                                                            class="text-sm font-weight-{{ $field->primary == '1' ? 'bold text-dark' : 'normal' }}">
                                                            @if ($field->link != '')
                                                                <a target="_blank"
                                                                    href="{{ url($field->link . '/?id=' . encrypt($detail->$string)) }}">
                                                                    {{ $detail->$string }}&nbsp;&nbsp;
                                                                    <i aria-hidden="true"
                                                                        class="fas fa-external-link-alt">
                                                                    </i>
                                                                </a>
                                                            @else
                                                                {{ $detail->$string }}
                                                            @endif
                                                        </td>
                                                    @endif
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                            style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active </code>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @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 src="{{ asset('js/trupdh.blade.js') }}"></script>
    <script src="{{ asset('/') }}assets/js/pdfmake/pdfmake.min.js"></script>
    <script src="{{ asset('/') }}assets/js/pdfmake/vfs_fonts.js"></script>
    @php
        $logoPath = public_path('storage/logo_large.png');
        $base64Logo = '';
        if (file_exists($logoPath)) {
            $logoType = pathinfo($logoPath, PATHINFO_EXTENSION);
            $logoData = file_get_contents($logoPath);
            $base64Logo = 'data:image/' . $logoType . ';base64,' . base64_encode($logoData);
        }
    @endphp
    <script>
        $(function() {
            const tableSel = '#list_{{ $dmenu }}';

            // --- cari index kolom "Status"
            const STATUS_COL = $(tableSel + ' thead th')
                .toArray()
                .findIndex(th => $(th).text().trim().toLowerCase() === 'status');

            // --- helper: show/hide & enable/disable tombol Finish All (AMAN)
            function refreshFinishAll(dt) {
                // pastikan Buttons sudah ada & tombolnya sudah terdaftar
                if (!$.fn.dataTable || !$.fn.dataTable.Buttons) return;
                if (!dt.buttons || dt.buttons().count() === 0) return;

                let finishBtnApi = null;
                try {
                    finishBtnApi = dt.button('finishAll:name');
                } catch (e) {
                    /* tombol belum ada */
                }
                if (!finishBtnApi) return;

                const anyCheckboxVisible = dt.rows({
                        search: 'applied'
                    }).nodes().to$()
                    .find('.row-checkbox').length > 0;

                $(finishBtnApi.node()).toggle(anyCheckboxVisible);
                finishBtnApi.enable(anyCheckboxVisible);
            }

            // --- init DataTable (SATU KALI)
            if ($.fn.DataTable.isDataTable(tableSel)) {
                // Kalau sudah pernah di-init oleh script lain, hancurkan dulu agar clean
                $(tableSel).DataTable().destroy();
            }

            const dt = $(tableSel).DataTable({
                responsive: true,
                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)"
                },

                // Posisikan "Show entries" di PALING KIRI, lalu Buttons di tengah kiri, lalu Search di kanan
                dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
                columnDefs: [{
                        targets: 0,
                        orderable: false,
                        searchable: false
                    }, // checkbox
                    {
                        targets: 1,
                        orderable: false,
                        searchable: false
                    }, // kolom No (akan diisi manual)
                ],
                order: [],

                buttons: [{
                        extend: 'excelHtml5',
                        text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="fw-bold"> Excel',
                        autoFilter: true,
                        sheetName: 'Exported data',
                        exportOptions: {
                            columns: ':visible:not(:last-child)'
                        }
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                        exportOptions: {
                            columns: ':visible:not(:last-child)'
                        }
                    },
                    {
                        extend: 'print',
                        text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="fw-bold"> Print',
                        exportOptions: {
                            columns: ':visible:not(:last-child)'
                        }
                    },
                    {
                        name: 'toggleStatus',
                        className: 'btn btn-info',
                        text: '<i class="fas fa-filter me-1 text-lg text-info"></i><span class="fw-bold"> Draft</span>',
                        action: function(e, dt, node) {
                            if (STATUS_COL === -1) {
                                alert('Kolom "Status" tidak ada.');
                                return;
                            }
                            const $btn = $(node);
                            const state = $btn.data('state') || 'onprogress';

                            if (state === 'onprogress') {
                                dt.column(STATUS_COL).search('^draft$', true, false, true).draw();
                                $btn.data('state', 'draft')
                                    .html(
                                        '<i class="fas fa-filter me-1 text-lg text-info"></i><span class="fw-bold"> On&nbsp;Progress</span>'
                                    );
                            } else {
                                dt.column(STATUS_COL).search('^on\\s*progress$', true, false, true)
                                    .draw();
                                $btn.data('state', 'onprogress')
                                    .html(
                                        '<i class="fas fa-filter me-1 text-lg text-info"></i><span class="fw-bold"> Draft</span>'
                                    );
                            }

                            // perbarui visibilitas Finish All setelah toggle
                            refreshFinishAll(dt);
                        }
                    },
                    {{-- {
                        name: 'finishAll',
                        className: 'btn btn-success',
                        text: '<i class="fas fa-check me-1 text-lg"></i><span class="fw-bold"> Finish All',
                        action: function(e, dt) {
                            const ids = $(tableSel + ' tbody .row-checkbox:checked')
                                .map((_, el) => el.value).get();
                            if (!ids.length) return;

                            const form = document.createElement('form');
                            form.method = 'POST';
                            form.action = '{{ route('selesaiAll') }}';

                            const csrf = document.querySelector('meta[name="csrf-token"]')?.content;
                            if (csrf) {
                                const i = document.createElement('input');
                                i.type = 'hidden';
                                i.name = '_token';
                                i.value = csrf;
                                form.appendChild(i);
                            }
                            ids.forEach(id => {
                                const hid = document.createElement('input');
                                hid.type = 'hidden';
                                hid.name = 'selected_ids[]';
                                hid.value = id;
                                form.appendChild(hid);
                            });
                            document.body.appendChild(form);
                            form.submit();
                        }
                    } --}} {
                        name: 'finishAll',
                        className: 'btn btn-success',
                        text: '<i class="fas fa-check me-1 text-lg"></i><span class="fw-bold"> Finish All',
                        action: function(e, dt) {
                            const ids = $(tableSel + ' tbody .row-checkbox:checked')
                                .map((_, el) => el.value).get();

                            if (!ids.length) {
                                Swal.fire({
                                    icon: 'warning',
                                    title: 'Tidak ada data',
                                    text: 'Pilih minimal 1 data sebelum melanjutkan.',
                                    confirmButtonColor: '#3085d6'
                                });
                                return;
                            }

                            Swal.fire({
                                title: 'Apakah Anda yakin?',
                                text: `Anda akan menyelesaikan ${ids.length} data terpilih.`,
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#3085d6',
                                cancelButtonColor: '#d33',
                                confirmButtonText: 'Ya, selesaikan!',
                                cancelButtonText: 'Batal'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    const form = document.createElement('form');
                                    form.method = 'POST';
                                    form.action = '{{ route('selesaiAll') }}';

                                    const csrf = document.querySelector(
                                        'meta[name="csrf-token"]')?.content;
                                    if (csrf) {
                                        const i = document.createElement('input');
                                        i.type = 'hidden';
                                        i.name = '_token';
                                        i.value = csrf;
                                        form.appendChild(i);
                                    }

                                    ids.forEach(id => {
                                        const hid = document.createElement('input');
                                        hid.type = 'hidden';
                                        hid.name = 'selected_ids[]';
                                        hid.value = id;
                                        form.appendChild(hid);
                                    });

                                    document.body.appendChild(form);
                                    form.submit();
                                }
                            });
                        }
                    }
                ],


                initComplete: function() {
                    const api = this.api();

                    // default tampilan: On Progress
                    if (STATUS_COL !== -1) {
                        api.column(STATUS_COL).search('^on\\s*progress$', true, false, true).draw();
                        const $toggle = $(api.button('toggleStatus:name').node());
                        $toggle.data('state', 'onprogress')
                            .html(
                                '<i class="fas fa-filter me-1 text-lg text-info"></i><span class="fw-bold"> Draft</span>'
                            );
                    }

                    // panggil sekali saat awal
                    refreshFinishAll(api);
                },



                // isi ulang penomoran "No" + cek tombol setiap draw
                drawCallback: function() {
                    const api = this.api();
                    api.column(1, {
                        search: 'applied',
                        order: 'applied'
                    }).nodes().each((cell, i) => {
                        cell.textContent = i + 1;
                    });
                    refreshFinishAll(api);
                }
            });

            // guard checkbox (biar bisa dicentang hanya jika allowed)
            document.addEventListener('change', (e) => {
                const cb = e.target;
                if (!cb.classList?.contains('row-checkbox')) return;
                if (cb.dataset.allowed !== '1') {
                    cb.checked = false;
                    alert('Lengkapi id_memo, id_app, dan id_detail terlebih dahulu.');
                }
            });
        });
    </script>

    <style>
        /* wadah tombol */
        .dataTables_wrapper .dt-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: .75rem;
            align-items: center;
        }

        /* tombol default (pakai CSS variable utk bg) */
        .dataTables_wrapper .dt-buttons .dt-button {
            --btn-bg: #8da0b5;
            /* warna dasar default */
            --btn-color: #fff;
            --btn-radius: 1px;
            /* tingkat oval (9999px = pill penuh) */
            --btn-pad-y: .60rem;
            /* tebal tombol (atas-bawah) */
            --btn-pad-x: 1.00rem;
            /* lebar tombol (kiri-kanan) */
            --btn-gap: .30rem;
            /* jarak antar tombol */
            --btn-icon-radius: 1px;
            /* oval kotak icon di kiri */
            --btn-icon-gap: .15rem;

            border: 0 !important;
            border-radius: 14px;
            padding: .6rem 1rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: .20rem;

            background: var(--btn-bg) !important;
            /* <- bukan inherit */
            background-image: none !important;
            /* kunci gradien bawaan */
            color: var(--btn-color) !important;
            box-shadow: 0 8px 22px rgba(17, 24, 39, .12);
            transition: none !important;
        }

        /* hover/focus/active: tetap pakai warna dasar */
        .dataTables_wrapper .dt-buttons .dt-button:hover,
        .dataTables_wrapper .dt-buttons .dt-button:focus,
        .dataTables_wrapper .dt-buttons .dt-button:active {
            background: var(--btn-bg) !important;
            background-image: none !important;
            color: var(--btn-color) !important;
            box-shadow: 0 8px 22px rgba(17, 24, 39, .12) !important;
            outline: none !important;
        }

        /* kotak icon */
        .dataTables_wrapper .dt-buttons .dt-button i {
            width: 26px;
            height: 26px;
            border-radius: 4px;
            display: inline-grid;
            place-items: center;
            background: #ffffff26;
        }

        /* varian */
        .dataTables_wrapper .dt-buttons .btn-soft {
            --btn-bg: #6c7f93;
        }

        .dataTables_wrapper .dt-buttons .btn-accent {
            --btn-bg: #028284;
            box-shadow: 0 12px 28px rgba(2, 130, 132, .25);
        }

        /* warna icon per tombol */
        .dataTables_wrapper .dt-buttons .btn-soft.buttons-excel i {
            color: #16a34a;
            background: #d1fae5;
        }

        .dataTables_wrapper .dt-buttons .btn-soft.buttons-pdf i {
            color: #e11d48;
            background: #ffe4e6;
        }

        .dataTables_wrapper .dt-buttons .btn-soft.buttons-print i {
            color: #0284c7;
            background: #e0f2fe;
        }

        /* disabled */
        .dataTables_wrapper .dt-buttons .dt-button.disabled,
        .dataTables_wrapper .dt-buttons .dt-button:disabled {
            opacity: .55;
            cursor: not-allowed;
            box-shadow: none;
        }
    </style>

    <script>
        document.addEventListener('change', (e) => {
            const cb = e.target;
            if (!cb.classList?.contains('row-checkbox')) return;
            if (cb.dataset.allowed !== '1') {
                cb.checked = false;
                alert('Lengkapi id_memo, id_app, dan id_detail terlebih dahulu.');
            }
        });

        let columnAbjad = '';
        $(document).ready(function() {

            let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
            let columnNames = '';
            for (let index = 0; index < numColumns; index++) {
                columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
                if (columnNames == 'Status' || columnNames == 'status') {
                    columnAbjad = String.fromCharCode(65 + index);
                }
            }

            if ($('*').hasClass('exp')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` )</code>`)
            }
            if ($('*').hasClass('stock')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text() + ` )</code>`)
            }
            if ($('*').hasClass('exp') && $('*').hasClass('stock')) {
                $('#noted').html(`<code>Note :( <i aria-hidden="true" style="color: #ffc2cd;"
                class="fas fa-circle"></i> Data not active ), ( <i aria-hidden="true"
                style="color: #ffe768;" class="fas fa-circle"></i> ` + $('#datenote').text() + ` ), ( <i aria-hidden="true"
                style="color: #f93c3c;" class="fas fa-circle"></i> ` + $('#stocknote').text() + ` )</code>`)
            }
        });

        //set color button datatables

        //function delete
        function deleteData(event, name, msg) {
            event.preventDefault(); // Prevent default form submission
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Find the closest form element and submit it manually
                    event.target.closest('form').submit();
                }
            });
        }

        function printPDF() {
            document.querySelectorAll('.print-pdf-btn').forEach((button) => {
                button.addEventListener('click', function(e) {

                    try {
                        // Check if pdfMake is loaded
                        if (typeof pdfMake === 'undefined') {
                            alert('PDF library is not loaded. Please refresh the page.');
                            return;
                        }

                        const documentId = button.dataset.id;

                        // Show loading indicator
                        const originalText = button.textContent;
                        button.textContent = 'Loading...';
                        button.disabled = true;

                        // Fetch detailed data from the new endpoint
                        const baseUrl = '{{ url('trupdh/pdf-data') }}';
                        fetch(`${baseUrl}/${documentId}`)
                            .then(response => response.json())
                            .then(result => {
                                if (!result.success) {
                                    throw new Error(result.error || 'Failed to fetch document data');
                                }

                                const data = result.data;

                                // Get current date
                                function formatDate(date) {
                                    if (!date) return '-';
                                    const d = new Date(date);
                                    const day = String(d.getDate()).padStart(2, '0');
                                    const month = String(d.getMonth() + 1).padStart(2, '0');
                                    const year = d.getFullYear();
                                    return `${day}-${month}-${year}`;
                                }

                                // Build table rows for details
                                const tableRows = [
                                    // Header row
                                    [{
                                            text: 'No.',
                                            bold: true,
                                            alignment: 'center'
                                        },
                                        {
                                            text: 'PP / PET',
                                            bold: true,
                                            alignment: 'center'
                                        },
                                        {
                                            text: 'Gsm',
                                            bold: true,
                                            alignment: 'center'
                                        },
                                        {
                                            text: 'Color',
                                            bold: true,
                                            alignment: 'center'
                                        },
                                        {
                                            text: 'Width',
                                            bold: true,
                                            alignment: 'center'
                                        },
                                        {
                                            text: 'Length',
                                            bold: true,
                                            alignment: 'center'
                                        },
                                        {
                                            text: 'Grade',
                                            bold: true,
                                            alignment: 'center'
                                        },
                                        {
                                            text: 'Qty',
                                            bold: true,
                                            alignment: 'center'
                                        },
                                        {
                                            text: 'Remark',
                                            bold: true,
                                            alignment: 'center'
                                        }
                                    ]
                                ];

                                // Add detail rows
                                if (data.details && data.details.length > 0) {
                                    data.details.forEach((detail, index) => {
                                        tableRows.push([{
                                                text: (index + 1).toString(),
                                                alignment: 'center'
                                            },
                                            {
                                                text: (detail.material_code || '-')
                                                    .replace(/-/g, '-\n'),
                                                alignment: 'center',
                                                fontSize: 9
                                            },
                                            {
                                                text: detail.gsm || '-',
                                                alignment: 'center'
                                            },
                                            {
                                                text: detail.color || '-',
                                                alignment: 'center'
                                            },
                                            {
                                                text: detail.width || '-',
                                                alignment: 'center'
                                            },
                                            {
                                                text: detail.length || '-',
                                                alignment: 'center'
                                            },
                                            {
                                                text: '-',
                                                alignment: 'center'
                                            },
                                            {
                                                text: `${detail.qty_sales || '-'} ${detail.sales_unit || ''}`,
                                                alignment: 'center'
                                            },
                                            {
                                                text: detail.refer || '-',
                                                alignment: 'center'
                                            }
                                        ]);
                                    });
                                }

                                const docDefinition = {
                                    pageSize: 'A4',
                                    pageMargins: [15, 20, 15, 120],
                                    content: [{
                                            table: {
                                                widths: ['*', 'auto'],
                                                body: [
                                                    [{
                                                            columns: [{
                                                                    image: data
                                                                        .logoBase64,
                                                                    width: 45,
                                                                    height: 35,
                                                                    margin: [2, 2, 0, 0]
                                                                },
                                                                {
                                                                    stack: [{
                                                                            text: 'PT. MULTI SPUNINDO JAYA Tbk',
                                                                            fontSize: 14,
                                                                            bold: true,
                                                                            color: '#008385'
                                                                        },
                                                                        {
                                                                            text: 'NONWOVENS MANUFACTURER',
                                                                            fontSize: 10,
                                                                            italics: true,
                                                                            color: '#8E8E8E'
                                                                        }
                                                                    ],
                                                                    alignment: 'left',
                                                                    margin: [7, 5, 0, 0]
                                                                }
                                                            ]
                                                        },
                                                        {
                                                            stack: [{
                                                                    text: 'No.     ' + (
                                                                        data.doc
                                                                        .id_ps ||
                                                                        '-'),
                                                                    bold: true,
                                                                    fontSize: 9
                                                                },
                                                                {
                                                                    text: 'Date     ' +
                                                                        (data.etdDate ||
                                                                            '-'),
                                                                    bold: true,
                                                                    margin: [0, 5, 0,
                                                                        0
                                                                    ],
                                                                    fontSize: 9
                                                                }
                                                            ],
                                                            alignment: 'right',
                                                            margin: [0, 4, 3, 0]
                                                        }
                                                    ],
                                                    [{
                                                            text: 'PERMOHONAN SAMPLE',
                                                            colSpan: 2,
                                                            alignment: 'center',
                                                            bold: true,
                                                            fontSize: 12,
                                                            margin: [0, 10, 0, 10],
                                                            decoration: 'underline'
                                                        },
                                                        {} // required for colSpan
                                                    ]
                                                ]
                                            },
                                            layout: {
                                                hLineWidth: (i, node) => (i === 0 || i === node
                                                    .table.body.length) ? 1 : 0,
                                                vLineWidth: (i, node) => (i === 0 || i === node
                                                    .table.widths.length) ? 1 : 0,
                                                paddingBottom: () => 1
                                            },
                                            margin: [0, 0, 0, 5]
                                        },
                                        {
                                            table: {
                                                widths: ['25%', '*'],
                                                body: [
                                                    [{
                                                            text: 'Customer',
                                                            fontSize: 8,
                                                            margin: [5, 0, 0, 0]
                                                        },
                                                        {
                                                            text: data.doc.customer || '-',
                                                            fontSize: 10
                                                        }
                                                    ],
                                                    [{
                                                            text: 'Alamat Pengiriman',
                                                            fontSize: 8,
                                                            margin: [5, 0, 0, 0]
                                                        },
                                                        {
                                                            text: data.doc
                                                                .alamat_pengiriman ||
                                                                'alamat',
                                                            fontSize: 10
                                                        }
                                                    ],
                                                    [{
                                                            text: 'Tanggal Pengiriman',
                                                            bold: true,
                                                            fontSize: 8,
                                                            margin: [5, 0, 0, 0]
                                                        },
                                                        {
                                                            text: data.etdDate || '-',
                                                            fontSize: 10,
                                                            bold: true
                                                        }
                                                    ],
                                                    [{
                                                            text: 'Send By',
                                                            bold: true,
                                                            fontSize: 8,
                                                            margin: [5, 0, 0, 0]
                                                        },
                                                        {
                                                            text: data.doc.shipment_by ||
                                                                'courier',
                                                            fontSize: 10,
                                                            bold: true
                                                        }
                                                    ],
                                                    [{
                                                            text: 'Mohon disertakan COA pada saat pengiriman sample roll/sheet',
                                                            colSpan: 2,
                                                            fontSize: 12,
                                                            bold: true,
                                                            margin: [5, 2, 0, 0]
                                                        },
                                                        {} // required for colSpan
                                                    ]
                                                ]
                                            },
                                            layout: {
                                                hLineWidth: (i, node) => (i === 0 || i === node
                                                    .table.body.length) ? 1 : 0,
                                                vLineWidth: (i, node) => (i === 0 || i === node
                                                    .table.widths.length) ? 1 : 0,
                                                paddingBottom: () => 1,
                                            },
                                            margin: [0, 0, 0, 5]
                                        },
                                        // Data table
                                        {
                                            table: {
                                                headerRows: 1,
                                                widths: [20, 90, 30, 45, 40, 40, 35, 30, '*'],
                                                body: tableRows
                                            },
                                            layout: {
                                                hLineWidth: (i, node) => (i === 0 ? 1 : 0),
                                                vLineWidth: () => 0,
                                                hLineColor: () => 'black',
                                                paddingTop: () => 3,
                                                paddingBottom: () => 3
                                            },
                                            fontSize: 9,
                                            margin: [0, 0, 0, 10]
                                        }
                                    ],
                                    // Footer
                                    footer: (currentPage, pageCount) => {
                                        const name2 = data.approvers[0]?.name ||
                                            ''; // Approver untuk Box 2
                                        const name3 = data.approvers[1]?.name ||
                                            ''; // Approver untuk Box 3

                                        return {
                                            margin: [20, 0, 20, 20],
                                            stack: [{
                                                    table: {
                                                        widths: ['33.3%', '33.3%', '33.3%'],
                                                        body: [
                                                            [
                                                                // Box 1: Dibuat Oleh
                                                                {
                                                                    stack: [{
                                                                            text: 'Dibuat Oleh',
                                                                            alignment: 'center',
                                                                            fontSize: 9
                                                                        },
                                                                        data
                                                                        .signaturePengaju &&
                                                                        data
                                                                        .signaturePengaju !==
                                                                        'noimage.png' ?
                                                                        {
                                                                            image: data
                                                                                .signaturePengaju,
                                                                            width: 60,
                                                                            height: 40,
                                                                            alignment: 'center',
                                                                            margin: [
                                                                                0,
                                                                                5,
                                                                                0,
                                                                                5
                                                                            ]
                                                                        } : {
                                                                            text: '\n\n\n\n',
                                                                            fontSize: 9
                                                                        },
                                                                        {
                                                                            text: data
                                                                                .username ||
                                                                                '',
                                                                            alignment: 'center',
                                                                            fontSize: 9
                                                                        }
                                                                    ],
                                                                    alignment: 'center',
                                                                    margin: [0, 5]
                                                                },
                                                                // Box 2: Diminta Oleh
                                                                {
                                                                    stack: [{
                                                                            text: 'Diminta Oleh',
                                                                            alignment: 'center',
                                                                            fontSize: 9
                                                                        },
                                                                        data
                                                                        .signature1Base64 &&
                                                                        data
                                                                        .signature1Base64 !==
                                                                        'noimage.png' ?
                                                                        {
                                                                            image: data
                                                                                .signature1Base64,
                                                                            width: 80,
                                                                            height: 40,
                                                                            alignment: 'center',
                                                                            margin: [
                                                                                0,
                                                                                5,
                                                                                0,
                                                                                5
                                                                            ]
                                                                        } : {
                                                                            text: '\n\n\n\n',
                                                                            fontSize: 9
                                                                        },
                                                                        {
                                                                            text: name2,
                                                                            alignment: 'center',
                                                                            fontSize: 9
                                                                        }
                                                                    ],
                                                                    alignment: 'center',
                                                                    margin: [0, 5]
                                                                },
                                                                // Box 3: Mengetahui
                                                                {
                                                                    stack: [{
                                                                            text: 'Mengetahui',
                                                                            alignment: 'center',
                                                                            fontSize: 9
                                                                        },
                                                                        data
                                                                        .signature2Base64 &&
                                                                        data
                                                                        .signature2Base64 !==
                                                                        'noimage.png' ?
                                                                        {
                                                                            image: data
                                                                                .signature2Base64,
                                                                            width: 80,
                                                                            height: 40,
                                                                            alignment: 'center',
                                                                            margin: [
                                                                                0,
                                                                                5,
                                                                                0,
                                                                                5
                                                                            ]
                                                                        } : {
                                                                            text: '\n\n\n\n',
                                                                            fontSize: 9
                                                                        },
                                                                        {
                                                                            text: name3,
                                                                            alignment: 'center',
                                                                            fontSize: 9
                                                                        }
                                                                    ],
                                                                    alignment: 'center',
                                                                    margin: [0, 5]
                                                                }
                                                            ]
                                                        ]
                                                    },
                                                    layout: {
                                                        hLineWidth: () => 1,
                                                        vLineWidth: () => 1,
                                                        hLineColor: () => 'black',
                                                        vLineColor: () => 'black'
                                                    }
                                                },
                                                {
                                                    text: '100.PSP.005.3.3',
                                                    fontSize: 9,
                                                    margin: [0, 5, 0, 0]
                                                }
                                            ]
                                        };
                                    }
                                };

                                pdfMake.createPdf(docDefinition).open();
                            })
                            .catch(error => {
                                alert('Error generating PDF: ' + error.message);
                            })
                            .finally(() => {
                                // Reset button
                                button.textContent = originalText;
                                button.disabled = false;
                            });

                    } catch (error) {
                        alert('Error creating PDF: ' + error.message);
                    }
                });
            });
        }

        // Initialize printPDF function when document is ready
        $(document).ready(function() {
            printPDF();
        });
    </script>
@endpush