@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@push('css')
    <style>
        .dropdown-menu {
            min-width: 180px;
            font-size: 0.875rem;
        }

        .dropdown-item {
            padding: 0.375rem 0.75rem;
        }

        .dropdown-item:hover {
            background-color: #00b7bd1a;
            color: #028284;
        }

        .dropdown-item:active {
            background-color: #00b7bd;
            color: white;
        }

        .dropdown-item i {
            width: 16px;
            text-align: center;
        }
    </style>
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                    </div>



                    <hr class="horizontal dark mt-3">
                    <div class="row px-4 pb-2">
                        <div class="col-lg">
                            <div class="d-flex align-items-center gap-3 flex-wrap">
                                <div class="d-flex align-items-center">
                                    <label class="text-sm mb-0 text-secondary me-2">Periode Bulan:</label>
                                    <input type="month" id="filter_month" class="form-control form-control-sm"
                                        style="width:180px;" value="{{ request('filter_month', date('Y-m')) }}"
                                        onchange="applyMonthFilter()">
                                </div>

                                @if (request('filter_month'))
                                    <a href="{{ url($url_menu) }}" class="btn btn-sm btn-link text-danger mb-0 px-2">
                                        <i class="fas fa-times me-1"></i> Clear
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper d-flex justify-content-between align-items-center">
                                <button id="pull-sap-btn" class="btn btn-primary mb-0">
                                    <i class="fas fa-arrows-rotate me-1"></i>
                                    <span class="font-weight-bold">Tarik Data SAP</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-4">
                            <table class="table display" id="list_{{ $dmenu }}">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th style="width: 5%">No</th>
                                        @foreach ($table_header as $header)
                                            <th>{{ $header->alias }}</th>
                                        @endforeach
                                        <th class="text-center">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($table_detail as $detail)
                                        @php
                                            $id = $detail->id_ps; // Kembali menggunakan id_ps agar link View/Edit valid
                                            $status = $detail->status ?? 'ENTRY';
                                            $isDraft = in_array(strtolower($status), ['draft', 'on progress', 'entry']);
                                            $hasIdSample = !empty($detail->id_sample);
                                        @endphp
                                        <tr {{ in_array(strtolower($status), ['closed', 'cancelled']) || $detail->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                            <td class="align-middle text-center">
                                                <span class="text-sm">{{ $loop->iteration }}</span>
                                            </td>
                                            

                                            @foreach ($table_header as $field)
                                                @php $name = $field->field; @endphp
                                                
                                                <td class="align-middle text-sm">
                                                    @if ($name == 'id_ps')
                                                        @php
                                                            $sublinkUrl = url(
                                                                'sbcrth?id=' .
                                                                encrypt($id) .
                                                                '&gmenu=' .
                                                                $gmenuid .
                                                                '&dmenu=' .
                                                                $dmenu .
                                                                '&tabel=trs_ps_d',
                                                            );
                                                        @endphp
                                                        <a href="{{ $sublinkUrl }}" class="text-sm font-weight-bold text-primary"
                                                            title="Klik untuk buka Sublink Detail di Tab Baru" target="_blank">
                                                            {{ $detail->$name ?? '-' }} <i
                                                                class="fas fa-external-link-alt text-xs ms-1"></i>
                                                        </a>
                                                    @elseif ($name == 'id_sample')
                                                        @if (empty($detail->id_sample) || $detail->id_sample == '-')
                                                            <span class="text-sm text-secondary">-</span>
                                                        @else
                                                            <span class="text-sm">{{ $detail->id_sample }}</span>
                                                        @endif
                                                    @elseif($name == 'salesman')
                                                       <span class="text-sm">{{ $detail->nama_salesman ?? '-' }}</span>
                                                    @elseif ($name == 'sap_data_changed')
                                                        @if(!empty($detail->sap_data_changed))
                                                            <span class="badge badge-sm bg-warning"
                                                                id="detail-sample-changes"
                                                                data-id="{{ encrypt($id) }}"
                                                                style="cursor: pointer;"
                                                                title="Lihat Detail Perubahan SAP">
                                                                 ⚠️ SAP Mismatch
                                                            </span>
                                                        @else
                                                            <span class="badge badge-sm bg-success"
                                                                title="Data Sudah Sync"
                                                                >✅ SAP Synced</span>
                                                        @endif
                                                    @elseif($name == 'status')
                                                        @php
                                                            $badgeClass = 'bg-gradient-secondary';
                                                            $current_status = $detail->status ?? 'Entry';
                                                            if (
                                                                strtolower($current_status) == 'finished' ||
                                                                strtolower($current_status) == 'completed'
                                                            ) {
                                                                $badgeClass = 'bg-gradient-success';
                                                            } elseif (
                                                                strtolower($current_status) == 'on progress' ||
                                                                strtolower($current_status) == 'draft'
                                                            ) {
                                                                $badgeClass = 'bg-gradient-info';
                                                            } elseif (strtolower($current_status) == 'pending') {
                                                                $badgeClass = 'bg-gradient-warning';
                                                            } elseif (strtolower($current_status) == 'entry') {
                                                                $badgeClass = 'bg-gradient-info';
                                                            } elseif (
                                                                in_array(strtolower($current_status), [
                                                                    'closed',
                                                                    'cancelled',
                                                                    'rejected',
                                                                ])
                                                            ) {
                                                                $badgeClass = 'bg-gradient-danger';
                                                            }
                                                        @endphp
                                                        <div class="text-center">
                                                            <span
                                                                class="badge badge-sm {{ $badgeClass }}">{{ strtoupper($current_status) }}</span>
                                                        </div>
                                                    @else
                                                        <span class="text-sm">{{ $detail->$name ?? '-' }}</span>
                                                    @endif
                                                </td>
                                            @endforeach
                                            <td class="text-sm font-weight-normal text-center">
                                                <div class="btn-group">
                                                    {{-- Button View --}}
                                                    <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                        title="Lihat Detail"
                                                        onclick="window.location='{{ url($url_menu . '/show/' . encrypt($id)) }}'">
                                                        <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>

                                                    @if ($authorize->edit == '1' && $status != 'Finished')
                                                        @php
                                                            $canSend = true;
                                                            $emailTooltip = 'Kirim email ke QC';
                                                            $isClosed = in_array(strtolower($status), [
                                                                'closed',
                                                                'cancelled',
                                                            ]);
                                                            if ($isClosed) {
                                                                $canSend = false;
                                                                $emailTooltip = 'PS sudah ditutup/dibatalkan';
                                                            }
                                                        @endphp
                                                        <button id="send-email-qc-{{ $detail->id_ps }}"
                                                            class="btn btn-sm {{ $canSend ? 'btn-success' : 'btn-secondary' }} px-3 mb-0 rounded ms-1"
                                                            data-id="{{ encrypt($id) }}" data-url="{{ url($url_menu) }}"
                                                            title="{{ $emailTooltip }}" {{ $canSend ? '' : 'disabled' }}>
                                                            <i class="fas fa-envelope me-1"></i><span class="font-weight-bold">
                                                                Send Email</span>
                                                        </button>
                                                    @endif


                                                    <ul class="dropdown-menu">
                                                        {{-- Button Edit --}}
                                                        @php $canEdit = $authorize->edit == '1' && ($detail->isactive ?? 1) == 1 && !in_array(strtolower($status), ['cancelled', 'finished']); @endphp
                                                        @if ($canEdit)
                                                            <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($id)) }}'">
                                                                    <i class="fas fa-edit"></i>
                                                                    <span class="font-weight-bold"> Edit</span>
                                                                </button>
                                                            </li>
                                                        @endif

                                                        {{-- Button Selesai --}}
                                                        @php $canFinish = $authorize->edit == '1' && !in_array(strtolower($status), ['finished', 'closed', 'cancelled']); @endphp
                                                        @if ($canFinish)
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li>
                                                            @if ($detail->is_ready ?? false)
                                                                <button id="pengajuan-selesai-btn-{{ $detail->id_ps }}"
                                                                    class="btn btn-sm btn-success mx-2 mb-0 w-90"
                                                                    data-id="{{ encrypt($id) }}" data-url="{{ url($url_menu) }}"
                                                                    title="Klik untuk menyelesaikan permohonan ini">
                                                                    <i class="fas fa-square-check"></i><span class="font-weight-bold">
                                                                        Selesai</span>
                                                                </button>
                                                            @else
                                                                <button type="button" class="btn btn-sm btn-secondary mx-2 mb-0 w-90"
                                                                    style="cursor: not-allowed; opacity: 0.65;"
                                                                    title="{{ $detail->ready_tooltip ?? 'Data belum lengkap' }}">
                                                                    <i class="fas fa-square-check"></i><span class="font-weight-bold">
                                                                        Selesai</span>
                                                                </button>
                                                            @endif
                                                        @endif

                                                        {{-- Button 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"
                                                            data-id="{{ $id }}" data-url="{{ $url_menu }}" title="Print PDF">
                                                            <i class="fas fa-file-pdf"></i>
                                                            <span class="font-weight-bold"> PDF</span>
                                                        </button>

                                                        {{-- Button Close (partial PS yang tidak dilanjutkan) --}}
                                                        @php $closeable = !in_array(strtolower($status), ['finished', 'closed', 'cancelled']); @endphp
                                                        @if ($closeable)
                                                            <li>
                                                                <hr class="dropdown-divider">
                                                            </li>
                                                            <button type="button"
                                                                class="btn btn-sm btn-danger mx-2 mb-0 w-90 btn-close-ps"
                                                                data-id="{{ encrypt($id) }}" data-label="{{ $id }}"
                                                                title="Tutup PS ini (sample tidak dilanjutkan)">
                                                                <i class="fas fa-ban me-1"></i>
                                                                <span class="font-weight-bold">Close</span>
                                                            </button>
                                                        @endif
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu)
            @endpush
        @endif
    @endif
@endsection

@push('js')
    <script src="{{ asset('/') }}assets/js/pdfmake/pdfmake.min.js"></script>
    <script src="{{ asset('/') }}assets/js/pdfmake/vfs_fonts.js"></script>
    <script>
        $(document).ready(function () {
            // Variable to store current filter state
            let currentCheckboxFilter = 'all';

            // Custom search function for DataTables
            $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
                if (settings.nTable.id !== 'list_{{ $dmenu }}') {
                    return true;
                }

                if (currentCheckboxFilter === 'all') {
                    return true;
                }

                const row = $(settings.nTable).find('tbody tr').eq(dataIndex);
                const checkbox = row.find('td:first-child input[type="checkbox"]');

                if (currentCheckboxFilter === 'with-checkbox') {
                    return checkbox.length > 0 && checkbox.is(':visible') && !checkbox.is(':hidden');
                } else if (currentCheckboxFilter === 'without-checkbox') {
                    return checkbox.length === 0 || checkbox.is(':hidden');
                }

                return true;
            });

            // Checkbox filter functionality
            $('#checkboxFilter').next('.dropdown-menu').on('click', 'a', function (e) {
                e.preventDefault();
                currentCheckboxFilter = $(this).data('filter');

                // Update button icon and style to show current filter
                const button = $('#checkboxFilter');

                if (currentCheckboxFilter === 'all') {
                    button.html('<i class="fas fa-list"></i>');
                    button.removeClass('btn-info btn-success me-2').addClass('btn-light');
                    button.attr('title', 'Showing: All Rows');
                } else if (currentCheckboxFilter === 'with-checkbox') {
                    button.html('<i class="fas fa-check-square me-2"></i>');
                    button.removeClass('btn-light btn-success me-2').addClass('btn-info');
                    button.attr('title', 'Showing: Rows With Checkbox');
                } else if (currentCheckboxFilter === 'without-checkbox') {
                    button.html('<i class="fas fa-square me-2"></i>');
                    button.removeClass('btn-light btn-info').addClass('btn-success');
                    button.attr('title', 'Showing: Rows Without Checkbox');
                }

                // Trigger DataTables redraw
                if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                    $('#list_{{ $dmenu }}').DataTable().draw();
                }
            });

            // Initialize DataTable (destroy first if exists to prevent reinit error)
            if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                $('#list_{{ $dmenu }}').DataTable().destroy();
            }

            const table = $('#list_{{ $dmenu }}').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)"
                },
                dom: 'Bfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel me-1 text-success"></i> Excel',
                    className: 'btn btn-outline-success btn-sm mb-0',
                    exportOptions: {
                        columns: ':visible:not(:first-child):not(:last-child)'
                    }
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf me-1 text-danger"></i> PDF',
                    className: 'btn btn-outline-danger btn-sm mb-0',
                    exportOptions: {
                        columns: ':visible:not(:first-child):not(:last-child)'
                    }
                }
                ]
            });

            // Check All functionality
            $('#check-all').on('click', function () {
                $('.row-checkbox').prop('checked', this.checked);
                toggleActionBtns();
            });

            $(document).on('change', '.row-checkbox', function () {
                toggleActionBtns();
            });

            // Mass Action Handler Helper
            function massAction(ids, title, text, actionUrl) {
                if (actionUrl.includes('/finish')) {
                    // Custom Selesai Massal handler dengan modal input ETD Date dll
                    Swal.fire({
                        title: 'Selesai Massal',
                        html: `
                            <div class="text-start px-2 mt-3">
                                <label class="form-label font-weight-bold text-sm">Nama Penerima <span class="text-danger">*</span></label>
                                <input type="text" id="massNamaPenerima" class="form-control mb-3" placeholder="Masukkan nama penerima">
                                
                                <label class="form-label font-weight-bold text-sm">Tanggal Penerimaan <span class="text-danger">*</span></label>
                                <input type="date" id="massTanggalPenerimaan" class="form-control mb-3" value="{{ date('Y-m-d') }}">

                                <label class="form-label font-weight-bold text-sm">ETD Date <span class="text-danger">*</span></label>
                                <input type="date" id="massEtdDate" class="form-control mb-2" value="{{ date('Y-m-d') }}">
                                <small class="text-muted text-xs"><i class="fas fa-info-circle me-1"></i>Tanggal Estiasi Keberangkatan</small>
                            </div>
                        `,
                        showCancelButton: true,
                        confirmButtonText: '<i class="fas fa-check me-1"></i> Proses Selesai',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#2dce89',
                        cancelButtonColor: '#f5365c',
                        customClass: {
                            confirmButton: 'btn btn-success px-4',
                            cancelButton: 'btn btn-danger px-4 ms-2',
                            title: 'text-dark fw-bold',
                            htmlContainer: 'px-4'
                        },
                        preConfirm: () => {
                            const namaPenerima = document.getElementById('massNamaPenerima').value;
                            const tanggalPenerimaan = document.getElementById('massTanggalPenerimaan').value;
                            const etdDate = document.getElementById('massEtdDate').value;

                            if (!namaPenerima || !tanggalPenerimaan || !etdDate) {
                                Swal.showValidationMessage('Harap isi semua field!');
                                return false;
                            }

                            return {
                                namaPenerima,
                                tanggalPenerimaan,
                                etdDate
                            };
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            const form = $('<form>', {
                                method: 'POST',
                                action: actionUrl
                            }).append($('<input>', {
                                type: 'hidden',
                                name: '_token',
                                value: "{{ csrf_token() }}"
                            }));

                            form.append($('<input>', {
                                type: 'hidden',
                                name: 'namaPenerima',
                                value: result.value.namaPenerima
                            }));

                            form.append($('<input>', {
                                type: 'hidden',
                                name: 'tanggalPenerimaan',
                                value: result.value.tanggalPenerimaan
                            }));

                            form.append($('<input>', {
                                type: 'hidden',
                                name: 'etdDate',
                                value: result.value.etdDate
                            }));

                            ids.forEach(id => {
                                form.append($('<input>', {
                                    type: 'hidden',
                                    name: 'selected_ids[]',
                                    value: id
                                }));
                            });

                            $('body').append(form);
                            form.submit();
                        }
                    });
                } else {
                    Swal.fire({
                        title: title,
                        text: text,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Ya, Proses!',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#00b7bd'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            const form = $('<form>', {
                                method: 'POST',
                                action: actionUrl
                            }).append($('<input>', {
                                type: 'hidden',
                                name: '_token',
                                value: "{{ csrf_token() }}"
                            }));

                            ids.forEach(id => {
                                form.append($('<input>', {
                                    type: 'hidden',
                                    name: 'selected_ids[]',
                                    value: id
                                }));
                            });

                            $('body').append(form);
                            form.submit();
                        }
                    });
                }
            }

            // PDF Print Logic
            $(document).on('click', '.print-pdf-btn', function () {
                const button = $(this);
                const id = button.data('id');
                const url = button.data('url');
                const originalHtml = button.html();

                button.html('<i class="fas fa-circle-notch fa-spin"></i>').prop('disabled', true);

                $.ajax({
                    url: url + '/pdf-data/' + id,
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        id: id
                    },
                    success: function (result) {
                        if (result.success) {
                            console.log(result.data)
                            generatePDF(result.data);
                        } else {
                            Swal.fire('Error', result.error || 'Gagal mengambil data PDF',
                                'error');
                        }
                    },
                    error: function () {
                        Swal.fire('Error', 'Terjadi kesalahan sistem', 'error');
                    },
                    complete: function () {
                        button.html(originalHtml).prop('disabled', false);
                    }
                });
            });

            // ── Close PS Handler ───────────────────────────────────────────
            $(document).on('click', '.btn-close-ps', function () {
                var encId = $(this).data('id');
                var label = $(this).data('label');
                Swal.fire({
                    title: 'Tutup PS ' + label + '?',
                    html: 'Sample pada PS ini dianggap <b>tidak akan dikirim lagi</b>.<br>Status akan diubah menjadi <b>Closed</b>.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Close',
                    cancelButtonText: 'Batal'
                }).then(function (result) {
                    if (result.isConfirmed) {
                        var form = $(
                            '<form method="POST" action="{{ url('sapsmp/close') }}"></form>');
                        form.append('@csrf');
                        form.append('<input type="hidden" name="id" value="' + encId + '">');
                        $('body').append(form);
                        form.submit();
                    }
                });
            });

            function generatePDF(data) {
                // PDF generation logic (preserved from previous version)
                const tableRows = [
                    [{
                        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',
                        // fillColor: '#f0f0f0'
                    },
                    {
                        text: 'Width',
                        bold: true,
                        alignment: 'center',
                        // fillColor: '#f0f0f0'
                    },
                    {
                        text: 'Length',
                        bold: true,
                        alignment: 'center',
                        // fillColor: '#f0f0f0'
                    },
                    {
                        text: 'Grade',
                        bold: true,
                        alignment: 'center',
                        // fillColor: '#f0f0f0'
                    },
                    {
                        text: 'Qty',
                        bold: true,
                        alignment: 'center',
                        // fillColor: '#f0f0f0'
                    },
                    {
                        text: 'Remark',
                        bold: true,
                        alignment: 'center',
                        // fillColor: '#f0f0f0'
                    }
                    ]
                ];

                if (data.details && data.details.length > 0) {
                    const uomMap = {
                        roll: 'ROL',
                        sheet: 'SHT',
                        pallet: 'PLT'
                    };
                    data.details.forEach((detail, index) => {
                        tableRows.push([{
                            text: (index + 1).toString(),
                            alignment: 'center'
                        },
                        {
                            text: detail.material_code || '-',
                            alignment: 'center',
                            fontSize: 8
                        },
                        {
                            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 || '-'} ${uomMap[(detail.sales_unit || '').toLowerCase()] || (detail.sales_unit || '').toUpperCase()
                                }`,
                            alignment: 'center'
                        },
                        {
                            text: detail.refer || '-',
                            alignment: 'center'
                        }
                        ]);
                    });
                }

                const docDefinition = {
                    pageSize: 'A4',
                    pageMargins: [30, 30, 30, 130],
                    content: [{
                        table: {
                            widths: ['*'],
                            body: [
                                [{
                                    columns: [
                                        data.logoBase64 ? {
                                            image: data.logoBase64,
                                            width: 240
                                        } : {
                                            text: 'LOGO',
                                            width: 60
                                        },

                                        {
                                            stack: [{
                                                text: 'No: ' + (data.doc.id_ps ||
                                                    '-'),
                                                fontSize: 9,
                                                alignment: 'right',
                                                margin: [0, 5, 0, 0]
                                            },
                                            {
                                                text: 'Tgl: ' + (data.etdDate ||
                                                    '-'),
                                                fontSize: 9,
                                                alignment: 'right'
                                            }
                                            ]
                                        },
                                    ],
                                    border: [true, true, true, false]
                                },],
                                [{
                                    text: 'PERMOHONAN SAMPLE',
                                    alignment: 'center',
                                    bold: true,
                                    fontSize: 12,
                                    decoration: 'underline',
                                    margin: [0, 10, 0, 10]
                                },

                                ]
                            ]
                        },
                        layout: {

                            hLineWidth: function (i, node) {
                                if (i === 0 || i === node.table.body.length) {
                                    return 1; // border atas & bawah
                                }
                                return 0; // garis dalam hilang
                            },


                            vLineWidth: function (i, node) {
                                if (i === 0 || i === node.table.widths.length) {
                                    return 1; // border kiri & kanan
                                }
                                return 0; // garis tengah hilang
                            }
                        },

                    },

                    {
                        table: {
                            widths: ['20%', '80%'],
                            body: [
                                [{
                                    text: 'Customer',
                                    fontSize: 10,
                                    // bold: true
                                },
                                {
                                    text: ': ' + (data.doc.customer || '-'),
                                    fontSize: 10
                                }
                                ],
                                [{
                                    text: 'Alamat',
                                    fontSize: 10,
                                    // bold: true
                                },
                                {
                                    text: ': ' + (data.doc.alamat_pengiriman || '-'),
                                    fontSize: 10
                                }
                                ],
                                [{
                                    text: 'Tanggal Pengiriman',
                                    fontSize: 10,
                                    // bold: true
                                },
                                {
                                    text: ': ' + (data.doc.receive_date || '-'),
                                    fontSize: 10
                                }
                                ],
                                [{
                                    text: 'Send by',
                                    fontSize: 10,
                                    // bold: true
                                },
                                {
                                    text: ': ' + (data.doc.nama || '-'),
                                    fontSize: 10
                                }
                                ],
                                [{
                                    text: 'Mohon disertakan COA pada saat pengiriman sample roll/sheet',
                                    fontSize: 10,
                                    bold: true,
                                    colSpan: 2,
                                    margin: [0, 6, 0, 0]
                                },
                                {}
                                ]
                            ]
                        },

                        layout: {

                            hLineWidth: function (i, node) {
                                if (i === 0 || i === node.table.body.length) {
                                    return 1; // border atas & bawah
                                }
                                return 0; // garis dalam hilang
                            },


                            vLineWidth: function (i, node) {
                                if (i === 0 || i === node.table.widths.length) {
                                    return 1; // border kiri & kanan
                                }
                                return 0; // garis tengah hilang
                            }
                        },

                        margin: [0, 20, 0, 15]
                    },


                    {
                        table: {
                            headerRows: 1,
                            widths: [20, '*', 30, 45, 40, 40, 35, 30, '*'],
                            body: tableRows
                        },
                        fontSize: 8,
                        layout: {
                            paddingTop: () => 4,
                            paddingBottom: () => 4,
                            hLineWidth: () => 0,
                            vLineWidth: () => 0
                        }
                    }
                    ],
                    footer: function (currentPage, pageCount) {
                        return {
                            margin: [30, 0, 30, 20],
                            stack: [
                                // 🔹 GARIS ATAS FOOTER
                                {
                                    canvas: [{
                                        type: 'line',
                                        x1: 0,
                                        y1: 0,
                                        x2: 535, // 595 - 30 - 30
                                        y2: 0,
                                        lineWidth: 1
                                    }],
                                    margin: [0, 0, 0, 8]
                                },

                                // 🔹 TABLE TTD
                                {
                                    table: {
                                        widths: ['33%', '34%', '33%'],
                                        body: [
                                            [{
                                                alignment: 'center',
                                                fontSize: 9,
                                                stack: [{
                                                    text: 'Dibuat Oleh'
                                                },
                                                {
                                                    text: '\n'
                                                },
                                                data.signaturePengaju ? {
                                                    image: data.signaturePengaju,
                                                    width: 80,
                                                    margin: [0, 5, 0, 5]
                                                } : {
                                                    text: '\n\n\n'
                                                },
                                                {
                                                    text: 'Eki' || '_________'
                                                }
                                                ]
                                            },
                                            {
                                                alignment: 'center',
                                                fontSize: 9,
                                                stack: [{
                                                    text: 'Diminta Oleh'
                                                },
                                                {
                                                    text: '\n'
                                                },
                                                data.signature1Base64 ? {
                                                    image: data.signature1Base64,
                                                    width: 80,
                                                    margin: [0, 5, 0, 5]
                                                } : {
                                                    text: '\n\n\n'
                                                },
                                                {
                                                    text: data.approvalKedua ||
                                                        '_________'
                                                }
                                                ]
                                            },
                                            {
                                                alignment: 'center',
                                                fontSize: 9,
                                                stack: [{
                                                    text: 'Mengetahui'
                                                },
                                                {
                                                    text: '\n'
                                                },
                                                data.signature2Base64 ? {
                                                    image: data.signature2Base64,
                                                    width: 80,
                                                    margin: [0, 5, 0, 5]
                                                } : {
                                                    text: '\n\n\n'
                                                },
                                                {
                                                    text: data.approvalKetiga ||
                                                        '_________'
                                                }
                                                ]
                                            }
                                            ]
                                        ]
                                    },

                                }
                            ]
                        };
                    }

                };
                pdfMake.createPdf(docDefinition).open();

                //pdfMake.createPdf(docDefinition).download(`Sample_${data.doc.id_ps || 'Export'}.pdf`);
            }

            // Selesai Button Click Handler
            $(document).on('click', '[id^="pengajuan-selesai-btn-"]', function () {
                const button = $(this);
                const encryptedId = button.data('id');
                const url = button.data('url');

                // Show SweetAlert modal with exact original styling
                Swal.fire({
                    title: 'Input Data Penerima',
                    html: `
                                                    <div class="mb-3 text-start">
                                                        <label class="form-label fw-bold" style="color: #344767; font-size: 0.875rem;">Nama Penerima</label>
                                                        <input type="text" id="namaPenerima" class="form-control" placeholder="Nama Penerima" style="font-size: 0.875rem;">
                                                    </div>
                                                    <div class="mb-3 text-start">
                                                        <label class="form-label fw-bold" style="color: #344767; font-size: 0.875rem;">Tanggal Penerimaan</label>
                                                        <input type="date" id="tanggalPenerimaan" class="form-control" value="${new Date().toISOString().split('T')[0]}" style="font-size: 0.875rem;">
                                                    </div>
                                                    <div class="mb-3 text-start">
                                                        <label class="form-label fw-bold" style="color: #344767; font-size: 0.875rem;">ETD Date</label>
                                                        <input type="date" id="etdDate" class="form-control" value="${new Date().toISOString().split('T')[0]}" style="font-size: 0.875rem;">
                                                    </div>
                                                `,
                    showCancelButton: true,
                    confirmButtonText: 'Submit',
                    cancelButtonText: 'Cancel',
                    buttonsStyling: true,
                    confirmButtonColor: '#2dce89',
                    cancelButtonColor: '#8898aa',
                    showCloseButton: false,
                    allowOutsideClick: false,
                    width: '600px',
                    customClass: {
                        popup: 'rounded-3',
                        title: 'text-dark fw-bold',
                        htmlContainer: 'px-4'
                    },
                    preConfirm: () => {
                        const namaPenerima = document.getElementById('namaPenerima').value;
                        const tanggalPenerimaan = document.getElementById('tanggalPenerimaan')
                            .value;
                        const etdDate = document.getElementById('etdDate').value;

                        if (!namaPenerima || !tanggalPenerimaan || !etdDate) {
                            Swal.showValidationMessage('Harap isi semua field!');
                            return false;
                        }

                        return {
                            namaPenerima,
                            tanggalPenerimaan,
                            etdDate
                        };
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Create and submit form
                        const form = $('<form>', {
                            method: 'POST',
                            action: url + '/selesai'
                        });

                        form.append($('<input>', {
                            type: 'hidden',
                            name: '_token',
                            value: '{{ csrf_token() }}'
                        }));

                        form.append($('<input>', {
                            type: 'hidden',
                            name: 'id',
                            value: encryptedId
                        }));

                        form.append($('<input>', {
                            type: 'hidden',
                            name: 'namaPenerima',
                            value: result.value.namaPenerima
                        }));

                        form.append($('<input>', {
                            type: 'hidden',
                            name: 'tanggalPenerimaan',
                            value: result.value.tanggalPenerimaan
                        }));

                        form.append($('<input>', {
                            type: 'hidden',
                            name: 'etdDate',
                            value: result.value.etdDate
                        }));

                        $('body').append(form);
                        form.submit();
                    }
                });
            });

            // ── Month Filter Logic ──────────────────────────────────────────
            window.applyMonthFilter = function () {
                const month = $('#filter_month').val();
                let url = new URL(window.location.href);

                if (month) {
                    url.searchParams.set('filter_month', month);
                } else {
                    url.searchParams.delete('filter_month');
                }

                window.location.href = url.toString();
            };

            // send template email ke QC
            $(document).on('click', '[id^="send-email-qc-"]', function () {

                let btn = $(this);
                let id = btn.data('id');
                let url = btn.data('url');
                console.log(url)
                Swal.fire({
                    title: 'Kirim Email?',
                    text: 'Email akan dikirim ke QC',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Kirim',
                    cancelButtonText: 'Batal'
                }).then((result) => {

                    if (result.isConfirmed) {

                        btn.prop('disabled', true).html(
                            '<i class="fas fa-spinner fa-spin"></i> Sending...'
                        );

                        $.ajax({
                            url: url + '/send-email-lab',
                            type: 'POST',
                            data: {
                                _token: $('meta[name="csrf-token"]').attr('content'),
                                id: id
                            },
                            success: function (res) {
                                Swal.fire('Berhasil!', res.message, 'success');
                                btn.prop('disabled', false).html(
                                    '<i class="fas fa-envelope me-1"></i> Send Email'
                                );
                            },
                            error: function (xhr) {
                                let errorMsg = (xhr.responseJSON && xhr.responseJSON
                                    .message) ? xhr.responseJSON.message :
                                    'Email gagal dikirim';
                                Swal.fire('Gagal!', errorMsg, 'error');
                                btn.prop('disabled', false).html(
                                    '<i class="fas fa-envelope me-1"></i> Send Email'
                                );
                            }
                        });
                    }
                });
            });
        });
    </script>
@endpush