@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@push('css')
    <style>
        table.dataTable tbody tr.not td {
            box-shadow: inset 0 0 0 9999px var(--bg-color) !important;
        }

        table.dataTable tbody tr.not:hover td {
            box-shadow: inset 0 0 0 9999px #ffc2cd !important;
        }

        /* Inline edit inputs di tabel stflab */
        .mtc-inline-input {
            border: 1px solid transparent;
            background: transparent;
            border-radius: 4px;
            padding: 2px 4px;
            font-size: 0.75rem;
            width: 100%;
            min-width: 80px;
            transition: border-color 0.2s, background 0.2s;
        }
        .mtc-inline-input:focus {
            outline: none;
            border-color: #00b7bd;
            background: #fff;
        }
        .mtc-inline-input.saving {
            border-color: #f5a623;
            background: #fffbf0;
        }
        .mtc-inline-input.saved {
            border-color: #2dce89;
            background: #f0fff8;
        }
    .mtc-inline-input.error {
             border-color: #f5365c;
             background: #fff5f5;
         }
         .mtc-inline-input.has-pending {
             border-color: #fb6340;
             background: #fff8f0;
         }
tr.has-pending-row,
           table.dataTable tbody tr.has-pending-row td {
               --pending-bg-color: #fff3cd;
               box-shadow: inset 0 0 0 9999px var(--pending-bg-color) !important;
           }
           tr.has-pending-row:hover td,
           table.dataTable tbody tr.has-pending-row:hover td {
               box-shadow: inset 0 0 0 9999px #ffe68a !important;
           }
           tr.has-pending-row.saving-row {
               --pending-bg-color: #fff8f0;
           }
        /* Read-only cells */
        .mtc-readonly-cell {
            font-size: 0.75rem;
            color: #6c757d;
            font-style: italic;
        }
        /* Wider table for stflab */
        #mtcSmpTable th, #mtcSmpTable td {
            white-space: nowrap;
        }
    </style>
@endpush

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Matching Sample'])

    <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">
                                <h6 class="mb-0">Matching Sample</h6>
                            </div>
                        </div>
                        <hr class="horizontal dark mt-2">

                        <div class="row align-items-center">
                            <div class="col-lg-8">
                                <div class="d-flex align-items-center gap-3 flex-wrap">
                                    <div class="d-flex align-items-center">
                                        <label class="text-xs font-weight-bold text-secondary me-2 mb-0">Bulan:</label>
                                        <input type="month" id="filter_month" class="form-control form-control-sm"
                                            style="width: 160px;" value="{{ request('filter_month', date('Y-m')) }}"
                                            onchange="applyFilter()">
                                    </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 class="col-lg-4">
                                <div class="d-flex align-items-center justify-content-lg-end mt-2 mt-lg-0">
                                    <label class="text-sm font-weight-bold text-secondary me-2 mb-0">Cari:</label>
                                    <input type="search" id="live-search-box" class="form-control form-control-sm"
                                        style="width: 200px;" placeholder="ID Sample / ID PS / Customer...">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body px-0 pt-0 pb-2">
                        @include('components.alert')

                        @if ($is_stflab)
                         <!-- <span id="save-indicator" class="badge bg-warning text-xs ms-2 d-none">Pending: 0</span> -->
                            {{-- STAFF LAB: TABLE LAYOUT --}}
                            <div class="table-responsive p-0 px-4 mt-3">
                                <table id="mtcSmpTable" class="table display align-items-center mb-0">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-center">No</th>
                                            <th class="text-center">Date PS</th>
                                            <th class="text-center">Date Matching</th>
                                            <th class="text-center">Deadline</th>
                                            <th class="text-center">ID Sample</th>
                                            <th class="text-center">ID Ps</th>
                                            <th class="text-center">Material</th>
                                            <th class="text-center">Width</th>
                                            <th class="text-center">Length</th>
                                            <th class="text-center">Customer</th>
                                            <th class="text-center">Attention To</th>
                                            {{-- Kolom input manual oleh Pak Slamet --}}
                                            <th class="text-center" style="min-width:90px;">No Roll</th>
                                            <th class="text-center" style="min-width:90px;">No Jumbo</th>
                                            <th class="text-center" style="min-width:60px;">Line</th>
                                            <th class="text-center" style="min-width:120px;">Note Keterangan</th>
                                            <th class="text-center" style="min-width:110px;">Tgl Memo</th>
                                            <th class="text-center" style="min-width:110px;">Jadwal Produksi</th>
                                            <th class="text-center" style="min-width:110px;">Tgl Finish PPS</th>
                                            <th class="text-center" style="min-width:110px;">Tgl Actual Kirim</th>
                                            <th class="text-center" style="min-width:100px;">Nomor DO</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $rowNo = 0; @endphp
                                        @foreach($samples as $index => $sample)
                                            @php
                                                $rowNo++;
                                                $isExpired = false;
                                                if (isset($sample->deadline) && $sample->deadline) {
                                                    try {
                                                        $now = \Carbon\Carbon::now()->startOfDay();
                                                        $deadline = \Carbon\Carbon::parse($sample->deadline)->startOfDay();
                                                        $isExpired = $now->gt($deadline);
                                                    } catch (\Exception $e) {
                                                    }
                                                }
                                                $trClass = $isExpired ? 'not' : '';
                                                $bgColor = $isExpired ? '--bg-color: #ffe6e6;' : '';
                                            @endphp
                                            <tr class="{{ $trClass }}" style="{{ $bgColor }}">
                                                <td class="align-middle text-center text-sm font-weight-normal ps-3">
                                                    {{ $rowNo }}
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-normal"
                                                    data-order="{{ !empty($sample->ps_date) ? \Carbon\Carbon::parse($sample->ps_date . ' ' . ($sample->ps_time ?? '00:00:00'))->format('YmdHi') : '' }}">
                                                    {{ !empty($sample->ps_date) ? \Carbon\Carbon::parse($sample->ps_date . ' ' . ($sample->ps_time ?? '00:00:00'))->format('d/m/Y H:i') : '-' }}
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-normal"
                                                    data-order="{{ !empty($sample->date_matching) ? \Carbon\Carbon::parse($sample->date_matching)->format('YmdHi') : '' }}">
                                                    {{ !empty($sample->date_matching) ? \Carbon\Carbon::parse($sample->date_matching)->format('d/m/Y H:i') : '-' }}
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-normal"
                                                    data-order="{{ !empty($sample->deadline) ? \Carbon\Carbon::parse($sample->deadline)->format('YmdHi') : '' }}">
                                                    {{ !empty($sample->deadline) ? \Carbon\Carbon::parse($sample->deadline)->format('d/m/Y') : '-' }}
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-bold text-dark">
                                                    {{ $sample->id_sample ?? '-' }}
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-normal">
                                                    <span class="badge bg-gradient-info text-xs">{{ $sample->id_ps }}</span>
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-normal">
                                                    {{ $sample->material_code ?? '-' }}
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-normal">
                                                    {{ $sample->width ?? '-' }}
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-normal">
                                                    {{ $sample->length ?? '-' }}
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-normal">
                                                    {{ $sample->customer_name }}
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-normal">
                                                    {{ $sample->attn_to ?? '-' }}
                                                </td>

                                                {{-- === KOLOM INPUT MANUAL (Pak Slamet) === --}}
                                                @php
                                                    $psDId = $sample->ps_d_id ?? null;
                                                    $psId  = $sample->id_ps;
                                                    $idSample = $sample->id_sample ?? null;
                                                    $material = $sample->material_code ?? '-';
                                                @endphp

                                                {{-- No Roll --}}
                                                <td class="align-middle">
                                                    <input type="text"
                                                        class="mtc-inline-input form-control"
                                                        data-field="no_roll"
                                                        data-ps-d-id="{{ $psDId }}"
                                                        data-id-ps="{{ $psId }}"
                                                        data-id-sample="{{ $idSample }}"
                                                        data-material-code="{{ $material }}"
                                                        value="{{ $sample->no_roll ?? '' }}"
                                                        placeholder="-">
                                                </td>

                                                {{-- No Jumbo --}}
                                                <td class="align-middle">
                                                    <input type="text"
                                                        class="mtc-inline-input form-control"
                                                        data-field="no_jumbo"
                                                        data-ps-d-id="{{ $psDId }}"
                                                        data-id-ps="{{ $psId }}"
                                                        data-id-sample="{{ $idSample }}"
                                                        data-material-code="{{ $material }}"
                                                        value="{{ $sample->no_jumbo ?? '' }}"
                                                        placeholder="-">
                                                </td>

                                                {{-- Line --}}
                                                <td class="align-middle">
                                                    <input type="number"
                                                        class="mtc-inline-input form-control"
                                                        data-field="line"
                                                        data-ps-d-id="{{ $psDId }}"
                                                        data-id-ps="{{ $psId }}"
                                                        data-id-sample="{{ $idSample }}"
                                                        data-material-code="{{ $material }}"
                                                        value="{{ $sample->line ?? '' }}"
                                                        placeholder="-"
                                                        style="min-width:60px;">
                                                </td>

                                                {{-- Note Keterangan --}}
                                                <td class="align-middle">
                                                    <textarea
                                                        class="mtc-inline-input form-control"
                                                        data-field="note_keterangan"
                                                        data-ps-d-id="{{ $psDId }}"
                                                        data-id-ps="{{ $psId }}"
                                                        data-id-sample="{{ $idSample }}"
                                                        data-material-code="{{ $material }}"
                                                        placeholder="-"
                                                        style="min-width:120px; resize:vertical;">{{ $sample->note_keterangan ?? '' }}</textarea>
                                                </td>

                                                {{-- Tgl Memo --}}
                                                <td class="align-middle">
                                                    <input type="date"
                                                        class="mtc-inline-input form-control"
                                                        data-field="tgl_memo"
                                                        data-ps-d-id="{{ $psDId }}"
                                                        data-id-ps="{{ $psId }}"
                                                        data-id-sample="{{ $idSample }}"
                                                        data-material-code="{{ $material }}"
                                                        value="{{ $sample->tgl_memo ?? '' }}">
                                                </td>

                                                {{-- Jadwal Produksi --}}
                                                <td class="align-middle">
                                                    <input type="date"
                                                        class="mtc-inline-input form-control"
                                                        data-field="jadwal_produksi"
                                                        data-ps-d-id="{{ $psDId }}"
                                                        data-id-ps="{{ $psId }}"
                                                        data-id-sample="{{ $idSample }}"
                                                        data-material-code="{{ $material }}"
                                                        value="{{ $sample->jadwal_produksi ?? '' }}">
                                                </td>

                                                {{-- Tgl Finish PPS (auto, read-only) --}}
                                                <td class="align-middle text-center">
                                                    <span class="mtc-readonly-cell form-control">
                                                        @if(!empty($sample->tgl_finish_pps))
                                                            {{ \Carbon\Carbon::parse($sample->tgl_finish_pps)->format('d/m/Y') }}
                                                        @else
                                                            -
                                                        @endif
                                                    </span>
                                                </td>

                                                {{-- Tgl Riil Kirim --}}
                                                <td class="align-middle">
                                                    <input type="date"
                                                        class="mtc-inline-input form-control"
                                                        data-field="tgl_riil_kirim"
                                                        data-ps-d-id="{{ $psDId }}"
                                                        data-id-ps="{{ $psId }}"
                                                        data-id-sample="{{ $idSample }}"
                                                        data-material-code="{{ $material }}"
                                                        value="{{ $sample->tgl_riil_kirim ?? '' }}">
                                                </td>

                                                {{-- Nomor DO (auto dari Bu Eki, read-only) --}}
                                                <td class="align-middle text-center">
                                                    <span class="mtc-readonly-cell form-control">
                                                        {{ $sample->do_number ?? '-' }}
                                                    </span>
                                                </td>
                                                <td class="align-middle text-center">
                                                    @if($sample->id_sample)
                                                        <a href="{{ url('mtcsmp/viewpdf/' . encrypt($sample->id_sample)) }}"
                                                            target="_blank" class="btn btn-sm btn-danger mb-0">
                                                            <i class="fas fa-file-pdf me-1"></i> View PDF
                                                        </a>
                                                    @else
                                                        -
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                        @else
                            {{-- ADMINS / ADMMRK CLASSIC TABLE VIEW --}}
                            <div class="table-responsive p-0 px-4 mt-3">
                                <table id="mtcSmpTableAdmin" class="table align-items-center mb-0">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-center">No</th>
                                            <th class="text-center">Deadline</th>
                                            <th class="text-center">ID Sample</th>
                                            <th class="text-center">Tgl Matching</th>
                                            <th class="text-center">ID SAP (PS)</th>
                                            <th class="text-center">Customer</th>
                                            <th class="text-center">Status</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($samples as $index => $sample)
                                            @php
                                                $isExpired = false;
                                                if (isset($sample->deadline) && $sample->deadline) {
                                                    try {
                                                        $now = \Carbon\Carbon::now()->startOfDay();
                                                        $deadline = \Carbon\Carbon::parse($sample->deadline)->startOfDay();
                                                        $isExpired = $now->gt($deadline);
                                                    } catch (\Exception $e) {
                                                    }
                                                }
                                                $trClass = $isExpired ? 'not' : '';
                                                $bgColor = $isExpired ? '--bg-color: #ffe6e6;' : '';
                                            @endphp
                                            <tr class="{{ $trClass }}" style="{{ $bgColor }}">
                                                <td class="align-middle text-center text-sm font-weight-normal ps-3">
                                                    {{ $index + 1 }}
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-normal"
                                                    data-order="{{ !empty($sample->deadline) ? \Carbon\Carbon::parse($sample->deadline)->format('YmdHi') : '' }}">
                                                    {{ !empty($sample->deadline) ? \Carbon\Carbon::parse($sample->deadline)->format('d/m/Y') : '-' }}
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-normal">
                                                    <span class="font-weight-bold text-dark">{{ $sample->id_sample ?? '-' }}</span>
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-normal">
                                                    <span class="text-m">
                                                        {{ \Carbon\Carbon::parse($sample->updated_at)->format('d/m/Y H:i') }}
                                                    </span>
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-normal">
                                                    <span class="badge bg-gradient-info text-xs">ID PS :
                                                        {{ $sample->id_ps }}</span>
                                                </td>
                                                <td class="align-middle text-center text-sm font-weight-normal">
                                                    {{ $sample->customer_name }}
                                                </td>
                                                <td class="align-middle text-center text-sm">
                                                    <span
                                                        class="badge badge-sm bg-gradient-{{ strtolower($sample->status ?? '') == 'finished' ? 'success' : 'secondary' }} text-xxs">{{ $sample->status ?? 'Not Matched' }}</span>
                                                </td>
                                                <td class="align-middle text-center">
                                                    @if($sample->id_sample)
                                                        <a href="{{ url('mtcsmp/viewpdf/' . encrypt($sample->id_sample)) }}"
                                                            target="_blank" class="btn btn-sm btn-danger mb-0">
                                                            <i class="fas fa-file-pdf"></i> View
                                                        </a>
                                                    @else
                                                        -
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif

                        <div class="row px-4 py-3">
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted">
                                    <code>Note : <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i> 
                                            Sample telah melebihi deadline yang telah ditentukan.
                                        </code>
                                    <span class="text-muted ms-3"><small><kbd>Ctrl</kbd>+<kbd>S</kbd> untuk menyimpan perubahan</small></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            $(document).ready(function () {
                // Determine layout mode
                const isStfLab = @json($is_stflab);

                if (!isStfLab) {
                    // Initialize DataTables for Admin view
                    var table = $('#mtcSmpTableAdmin').DataTable({
                        "language": {
                            "search": "Cari :",
                            "lengthMenu": "Tampilkan _MENU_ baris",
                            "zeroRecords": "Maaf - Data tidak ada",
                            "info": "Data _START_ - _END_ dari _TOTAL_",
                            "infoEmpty": "Tidak ada data",
                            "infoFiltered": "(pencarian dari _MAX_ data)"
                        },
                        "paging": true,
                        "responsive": true,
                        "ordering": true,
                        "info": true,
                        "lengthChange": true,
                        "dom": 'Bfrtip',
                        "pageLength": 10,
                        "buttons": [
                            {
                                extend: 'excelHtml5',
                                text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel',
                                className: 'btn btn-sm btn-secondary',
                                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',
                                className: 'btn btn-sm btn-secondary',
                                exportOptions: {
                                    columns: ':visible:not(:last-child)'
                                }
                            }
                        ]
                    });

                    $('#live-search-box').on('input', function () {
                        table.search($(this).val()).draw();
                    });
                } else {
                    // Initialize DataTables for StfLab table view
                    var stfTable = $('#mtcSmpTable').DataTable({
                        "language": {
                            "search": "Cari :",
                            "lengthMenu": "Tampilkan _MENU_ baris",
                            "zeroRecords": "Maaf - Data tidak ada",
                            "info": "Data _START_ - _END_ dari _TOTAL_",
                            "infoEmpty": "Tidak ada data",
                            "infoFiltered": "(pencarian dari _MAX_ data)"
                        },
                        "paging": true,
                        "responsive": true,
                        "ordering": true,
                        "info": true,
                        "lengthChange": true,
                        "dom": 'Bfrtip',
                        "pageLength": 10,
                        "buttons": [
                            {
                                extend: 'excelHtml5',
                                text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel',
                                className: 'btn btn-sm btn-secondary',
                                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',
                                className: 'btn btn-sm btn-secondary',
                                exportOptions: {
                                    columns: ':visible:not(:last-child)'
                                }
                            }
                        ]
                    });

                    $('#live-search-box').on('input', function () {
                        stfTable.search($(this).val()).draw();
                    });
                }

                // Month Filter Logic
                window.applyFilter = 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.href;
                };
            });

            $(document).on('click', '.print-pdf-btn', function () {
                const button = $(this);
                const id = button.data('id');
                const url = "{{ url('mtcsmp') }}";
                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) {
                            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);
                    }
                });
            });

            function generatePDF(data) {
                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'
                    },
                    {
                        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'
                    }
                    ]
                ];

                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.note || '-',
                            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: (i, node) => (i === 0 || i === node.table.body.length) ? 1 : 0,
                            vLineWidth: (i, node) => (i === 0 || i === node.table.widths.length) ? 1 : 0
                        }
                    },
                    {
                        table: {
                            widths: ['20%', '80%'],
                            body: [
                                [{
                                    text: 'Customer',
                                    fontSize: 10
                                }, {
                                    text: ': ' + (data.doc.customer || '-'),
                                    fontSize: 10
                                }],
                                [{
                                    text: 'Alamat',
                                    fontSize: 10
                                }, {
                                    text: ': ' + (data.doc.alamat_pengiriman || '-'),
                                    fontSize: 10
                                }],
                                [{
                                    text: 'Tanggal Pengiriman',
                                    fontSize: 10
                                }, {
                                    text: ': ' + (data.doc.receive_date || '-'),
                                    fontSize: 10
                                }],
                                [{
                                    text: 'Send by',
                                    fontSize: 10
                                }, {
                                    text: ': ' + (data.doc.salesman || '-'),
                                    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: (i, node) => (i === 0 || i === node.table.body.length) ? 1 : 0,
                            vLineWidth: (i, node) => (i === 0 || i === node.table.widths.length) ? 1 : 0
                        },
                        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: [{
                                canvas: [{
                                    type: 'line',
                                    x1: 0,
                                    y1: 0,
                                    x2: 535,
                                    y2: 0,
                                    lineWidth: 1
                                }],
                                margin: [0, 0, 0, 8]
                            },
                            {
                                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();
            }

            // ── COLLECT CHANGES & SAVE ON CTRL+S ───────────────────────────────
             let pendingChanges = {};
             
             function collectChange(input, field, psDId, idPs, idSample, material, value) {
                 const key = `${idPs}-${psDId}-${field}`;
                 pendingChanges[key] = { input, field, psDId, idPs, idSample, material, value };
                 console.log(pendingChanges);
                 input.addClass('has-pending');
                 input.closest('tr').addClass('has-pending-row');
             }
             
            $(document).on('input', '.mtc-inline-input', function () {
                  const input = $(this);
                  const field = input.data('field');
                  const psDId = input.data('ps-d-id');
                  const idPs  = input.data('id-ps');
                  const idSample = input.data('id-sample');
                  const material = input.data('material-code');
                  const value = input.val();
                  
                  if (!psDId || !idPs) return;
                  
                  input.removeClass('saved error');
                  collectChange(input, field, psDId, idPs, idSample, material, value);
              });
              
            $(document).on('keydown', function (e) {
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
        e.preventDefault();
        e.stopPropagation();

        if (Object.keys(pendingChanges).length === 0) {
            return;
        }

        const changes = Object.values(pendingChanges);

        // Build table of changes for modal
        let html = `
            <table class="table display align-items-center mb-0">
                <thead class="thead-light" style="background-color: #00b7bd4f;">
                    <tr>
                        <th>ID PS</th>
                        <th>ID Sample</th>
                        <th>Material</th>
                        <th>Field</th>
                        <th>Value</th>
                    </tr>
                </thead>
                <tbody>`;

        changes.forEach(change => {
            const fieldName = change.field
                .replace(/_/g, ' ')
                .replace(/\b\w/g, l => l.toUpperCase());

            html += `
                <tr>
                    <td>${change.idPs}</td>
                    <td>${change.idSample}</td>
                    <td>${change.material}</td>
                    <td>
                        ${
                            fieldName?.toLowerCase() === 'tgl riil kirim'
                                ? 'Tanggal Actual Kirim'
                                : fieldName
                        }
                    </td>
                    <td>${change.value || '-'}</td>
                </tr>`;
        });

        html += `
                </tbody>
            </table>`;

        Swal.fire({
            title: 'Konfirmasi Simpan',
            html: html,
            icon: 'question',
            width: '900px',
            showCancelButton: true,
            confirmButtonText: 'Ya, Simpan',
            cancelButtonText: 'Batal',
            reverseButtons: true,
            allowEnterKey: true,
            allowEscapeKey: true,
            customClass: {
                popup: 'text-left',
                content: 'text-left'
            }
        }).then((result) => {

            if (!result.isConfirmed) return;

            let totalCount = Object.keys(pendingChanges).length;
            let pendingCount = totalCount;
            let savedCount = 0;
            let failedCount = 0;

            // tampilkan loading
            Swal.fire({
                title: 'Menyimpan...',
                html: `
                    <div style="margin-top:10px">
                        <div><b>0</b> dari ${totalCount} perubahan diproses</div>
                        <small>Mohon tunggu...</small>
                    </div>
                `,
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            Object.values(pendingChanges).forEach((change) => {

                const {
                    input,
                    field,
                    psDId,
                    idPs,
                    value
                } = change;

                const key = `${psDId}-${field}`;
                const tr = input.closest('tr');

                input.removeClass('has-pending')
                     .addClass('saving');

                tr.addClass('saving-row');

                $.ajax({
                    url: '{{ route("mtcsmp.save-detail") }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        ps_d_id: psDId,
                        id_ps: idPs,
                        field: field,
                        value: value
                    },

                    success: function(res) {

                        pendingCount--;

                        if (res.ok) {
                            savedCount++;

                            input.removeClass('saving error')
                                 .addClass('saved');

                            delete pendingChanges[key];
                        } else {
                            failedCount++;

                            input.removeClass('saving')
                                 .addClass('error');

                            console.error(
                                '[mtcsmp] save gagal:',
                                res.message
                            );
                        }

                        // update progress
                        const processed =
                            totalCount - pendingCount;

                        const progress =
                            Swal.getHtmlContainer();

                        if (progress) {
                            const b =
                                progress.querySelector('b');

                            if (b) {
                                b.textContent = processed;
                            }
                        }

                        // semua selesai
                        if (pendingCount === 0) {

                            Swal.close();

                            if (
                                savedCount > 0 &&
                                failedCount === 0
                            ) {

                                Swal.fire({
                                    toast: true,
                                    position: 'top-end',
                                    icon: 'success',
                                    title:
                                        `${savedCount} perubahan tersimpan`,
                                    showConfirmButton: false,
                                    timer: 2000
                                }).then(() => {
                                    location.reload();
                                });

                            } else {

                                Swal.fire(
                                    'Error',
                                    `${savedCount} tersimpan, ${failedCount} gagal`,
                                    'error'
                                );
                            }
                        }
                    },

                    error: function(xhr) {

                        pendingCount--;
                        failedCount++;

                        input.removeClass('saving')
                             .addClass('error');

                        const msg =
                            xhr.responseJSON?.message ||
                            'Gagal menyimpan';

                        console.error(
                            '[mtcsmp] AJAX error:',
                            msg
                        );

                        // update progress
                        const processed =
                            totalCount - pendingCount;

                        const progress =
                            Swal.getHtmlContainer();

                        if (progress) {
                            const b =
                                progress.querySelector('b');

                            if (b) {
                                b.textContent = processed;
                            }
                        }

                        // semua selesai
                        if (pendingCount === 0) {

                            Swal.close();

                            Swal.fire(
                                'Error',
                                `${savedCount} tersimpan, ${failedCount} gagal`,
                                'error'
                            );
                        }
                    }
                });
            });
        });
    }
});
        </script>
    @endpush
@endsection