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

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

    {{-- ── Topbar Buttons ── --}}
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper d-flex gap-2">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($authorize->add == '1')
                            <button class="btn btn-primary mb-0" id="btn-save-pps" type="button" data-shortcut="save">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Generate &amp; Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">

                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="form-genpps">
                    @csrf

                    {{-- ── CARD 1: Mode Toggle + Pilih ID PS ────────────────────────────── --}}
                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <h6 class="mb-0 font-weight-bold text-uppercase text-sm">
                                <i class="fas fa-file-invoice me-2 text-primary"></i>
                                Generate PPS / SJS
                            </h6>
                        </div>
                        <div class="card-body">
                            <hr class="horizontal dark mt-0">

                            @include('components.alert')

                            {{-- Toggle di atas --}}
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <div class="form-check form-switch d-flex align-items-center gap-3">
                                        <input class="form-check-input" type="checkbox" id="use_id_ps" name="use_id_ps"
                                            value="1" checked style="width:3rem; height:1.5rem; cursor:pointer;">
                                        <div>
                                            <label class="form-check-label font-weight-bold mb-0" for="use_id_ps">
                                                <i class="fas fa-link me-1 text-primary"></i>
                                                Generate Menggunakan ID PS
                                            </label>
                                            <div class="text-muted text-xs">
                                                Aktif: Pilih dari daftar ID PS yang tersedia. &nbsp;|&nbsp;
                                                Non-aktif: Input PPS secara manual.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Section: Pilih ID PS (tampil saat toggle ON) --}}
                            <div id="section-id-ps">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="form-group">
                                            <label class="form-control-label font-weight-bold">
                                                ID PS <span class="text-danger">*</span>
                                            </label>
                                            <select class="form-select select2" name="id_ps" id="id_ps">
                                                <option value="">-- Pilih ID PS --</option>
                                                @foreach ($list_ps as $ps)
                                                    <option value="{{ $ps->id_ps }}"
                                                        data-ps_date="{{ $ps->ps_date ?? '' }}"
                                                        data-customer="{{ $ps->customer_ps ?? '' }}"
                                                        data-customer-ship-to="{{ $ps->customer_ship_to_ps ?? '' }}"
                                                        data-end-user="{{ $ps->end_user_web ?? '' }}"
                                                        data-salesman="{{ $ps->salesman_web ?? '' }}"
                                                        data-alamat="{{ $ps->alamat_pengiriman ?? '' }}"
                                                        {{ old('id_ps') == $ps->id_ps ? 'selected' : '' }}
                                                        {{ ($preselect_id_ps ?? null) == $ps->id_ps ? 'selected' : '' }}>
                                                        {{ $ps->id_ps }}
                                                        @if ($ps->customer_ps)
                                                            — {{ $ps->customer_ps }}
                                                        @endif
                                                        @if ($ps->ps_date)
                                                            ({{ $ps->ps_date }})
                                                        @endif
                                                    </option>
                                                @endforeach
                                            </select>
                                            @if ($list_ps->isEmpty())
                                                <small class="text-warning mt-1 d-block">
                                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                                    Semua ID PS sudah memiliki PPS aktif.
                                                </small>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    {{-- ── CARD 2: Detail PS (auto-fill setelah pilih id_ps) ──────── --}}
                    <div class="card mb-4" id="card-ps-detail" style="{{ old('id_ps') ? '' : 'display:none;' }}">
                        <div class="card-header pb-0">
                            <h6 class="mb-0 font-weight-bold text-uppercase text-sm">
                                <i class="fas fa-info-circle me-2 text-info"></i>
                                Informasi Picking Slip
                                <span id="badge-id-ps" class="badge bg-gradient-info ms-2"></span>
                            </h6>
                        </div>
                        <div class="card-body">
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Tanggal PS</label>
                                        <input type="text" class="form-control bg-light" id="disp_ps_date" disabled>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Customer</label>
                                        <input type="text" class="form-control bg-light" id="disp_customer" disabled>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Customer Ship To</label>
                                        <input type="text" class="form-control bg-light" id="disp_customer_ship_to"
                                            disabled>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Customer End User</label>
                                        <input type="text" class="form-control bg-light" id="disp_end_user" disabled>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Salesman</label>
                                        <input type="text" class="form-control bg-light" id="disp_salesman" disabled>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Alamat Pengiriman</label>
                                        <textarea class="form-control bg-light" id="disp_alamat" rows="2" disabled></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ── CARD 3: Item PS ─────────────────────────────────────────── --}}
                    <div class="card mb-4" id="card-ps-items" style="{{ old('id_ps') ? '' : 'display:none;' }}">
                        <div class="card-header pb-0">
                            <h6 class="mb-0 font-weight-bold text-uppercase text-sm">
                                <i class="fas fa-boxes me-2 text-success"></i>
                                Item / Material
                            </h6>
                        </div>
                        <div class="card-body p-0">
                            <hr class="horizontal dark mt-0 mx-3">
                            <div class="table-responsive px-3 pb-3">
                                <table class="table table-sm table-bordered mb-0 excel-table" id="tbl-items">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-center text-xs" style="width:40px;">No</th>
                                            <th class="text-center text-xs" style="width:90px;">
                                                <div
                                                    class="form-check d-flex align-items-center justify-content-center gap-1 mb-0">
                                                    <input class="form-check-input mt-0" type="checkbox"
                                                        id="check-all-items" style="width: 18px; height: 18px;">

                                                </div>
                                            </th>
                                            <th class="text-xs" style="width:250px;">PP/PET</th>
                                            <th class="text-center text-xs" style="width:50px;">Gsm</th>
                                            <th class="text-center text-xs" style="width: 150px; min-width: 150px;">No
                                                Roll</th>
                                            <th class="text-center text-xs" style="width: 150px; min-width: 150px;">No
                                                Jumbo</th>
                                            <th class="text-xs" style="width:120px;">Color</th>
                                            <th class="text-center text-xs" style="width:50px;">Width</th>
                                            <th class="text-center text-xs" style="width:50px;">Length</th>
                                            <th class="text-xs" style="width:80px;">Grade</th>
                                            <th class="text-center text-xs" style="width:50px;">Qty</th>
                                            <th class="text-center text-xs" style="width:60px;">UOM</th>
                                            <th class="text-xs">Remark</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbody-items">
                                        <tr id="row-no-items">
                                            <td colspan="13" class="text-center text-secondary text-sm py-3">
                                                Pilih ID PS terlebih dahulu.
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="mt-2 text-sm text-muted">
                                    <i class="fas fa-info-circle me-1"></i>
                                    <span id="selected-item-count">0 item dipilih</span>
                                </div>
                                <div class="mt-1 text-sm text-warning d-none" id="ps-full-warning">
                                    <i class="fas fa-lock me-1"></i>
                                    Semua material pada ID PS ini telah terisi penuh.
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ── CARD MANUAL ENTRY (tampil saat toggle OFF) ─────────────── --}}
                    <div class="card mb-4" id="card-manual-entry" style="display:none;">
                        <div class="card-header pb-0 d-flex align-items-center justify-content-between">
                            <h6 class="mb-0 font-weight-bold text-uppercase text-sm">
                                Input PPS Manual
                            </h6>
                            <button type="button" class="btn btn-sm btn-outline-primary mb-0" id="btn-add-manual-row">
                                <i class="fas fa-plus me-1"></i> Tambah Baris
                            </button>
                        </div>
                        <div class="card-body">
                            <hr class="horizontal dark mt-0">
                            {{-- Info pengiriman manual --}}
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Customer</label>
                                        <input type="text" class="form-control" name="manual_customer"
                                            value="{{ old('manual_customer') }}" placeholder="Nama customer">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Tanggal Pengiriman</label>
                                        <input type="date" class="form-control" name="manual_tanggal_pengiriman"
                                            value="{{ old('manual_tanggal_pengiriman') }}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-control-label">Alamat Pengiriman</label>
                                        <textarea class="form-control" name="manual_alamat_pengiriman" rows="1" placeholder="Alamat tujuan">{{ old('manual_alamat_pengiriman') }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <hr class="horizontal dark mt-0 mx-3">
                            <div class="table-responsive px-3 pb-3">
                                <table class="table table-sm table-bordered mb-0 excel-table" id="tbl-manual">
                                    <thead style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-center text-xs" style="width:40px;">No</th>
                                            <th class="text-xs" style="width:250px;">PP/PET</th>
                                            <th class="text-center text-xs" style="width:50px;">Gsm</th>
                                            <th class="text-center text-xs" style="width: 150px; min-width: 150px;">No
                                                Roll</th>
                                            <th class="text-center text-xs" style="width: 150px; min-width: 150px;">No
                                                Jumbo</th>
                                            <th class="text-xs" style="width:120px;">Color</th>
                                            <th class="text-center text-xs" style="width:50px;">Width</th>
                                            <th class="text-center text-xs" style="width:50px;">Length</th>
                                            <th class="text-xs" style="width:80px;">Grade</th>
                                            <th class="text-center text-xs" style="width:70px;">Qty</th>
                                            <th class="text-center text-xs" style="width:60px;">UOM</th>
                                            <th class="text-xs">Remark</th>
                                            <th class="text-center text-xs" style="width:50px;">Hapus</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbody-manual">
                                        {{-- rows injected by JS --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

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

    {{-- MODAL PREVIEW ITEMS --}}
    <div class="modal fade" id="modalPreviewItems" tabindex="-1" role="dialog"
        aria-labelledby="modalPreviewItemsLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bold" id="modalPreviewItemsLabel">Konfirmasi Generate PPS</h5>
                    <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="text-sm mb-3">
                        Anda akan membuat PPS untuk ID PS: <strong id="modal-id-ps-label"
                            class="text-primary"></strong><br>
                        Berikut adalah ringkasan item yang dipilih:
                    </p>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th class="text-center text-xxs">No</th>
                                    <th class="text-xxs">Kode Material</th>
                                    <th class="text-center text-xxs">Gsm</th>
                                    <th class="text-center text-xxs">No Roll</th>
                                    <th class="text-center text-xxs">No Jumbo</th>
                                    <th class="text-center text-xxs">Color</th>
                                    <th class="text-center text-xxs">Width</th>
                                    <th class="text-center text-xxs">Length</th>
                                    <th class="text-center text-xxs">Grade</th>
                                    <th class="text-center text-xxs">Qty</th>
                                    <th class="text-center text-xxs">UOM</th>
                                    <th class="text-xxs">Remark</th>
                                </tr>
                            </thead>
                            <tbody id="tbody-preview">
                                {{-- Injected by JS --}}
                            </tbody>
                            <tfoot>
                                <tr class="font-weight-bold">
                                    <td colspan="11" class="text-end text-xs">Total Baris Baru:</td>
                                    <td id="preview-total-rows" class="text-center text-xs text-primary"></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" id="btn-confirm-generate">
                        <i class="fas fa-check me-1"></i> Ya, Generate
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Data PS dan Item (JS lookup) --}}
    @php
        // Encode data untuk dipakai JS: map id_ps → detail item
        $psItemsJs = [];
        foreach ($list_ps_items as $idPs => $items) {
            $psItemsJs[$idPs] = $items
                ->map(function ($item) {
                    return [
                        'detail_id' => $item->detail_id,
                        'item_number' => $item->item_number,
                        'material_code' => $item->material_code,
                        'gsm' => $item->gsm ?? '',
                        'no_roll' => $item->no_roll ?? '',
                        'no_jumbo' => $item->no_jumbo ?? '',
                        'color' => $item->color ?? '',
                        'width' => $item->width ?? '',
                        'length' => $item->length ?? '',
                        'grade' => $item->grade ?? '',
                        'sales_unit' => $item->sales_unit ?? '',
                        'qty_sales' => $item->qty_sales ?? '',
                        'qty_sent_total' => $item->qty_sent_total ?? 0,
                        'qty_remaining' => $item->qty_remaining ?? ($item->qty_sales ?? 0),
                        'remark' => $item->remark ?? '',
                        'item_status' => $item->item_status ?? 'notset',
                        'no_pps_existing' => $item->no_pps_existing,
                        'flag_rejection' => $item->flag_rejection ?? '0',
                        'sumber_material' => $item->sumber_material ?? '',
                        'can_create_pps' => (int) ($item->can_create_pps ?? 1),
                    ];
                })
                ->values()
                ->toArray();
        }
    @endphp

    @push('css')
        <style>
            .auto-upper {
                text-transform: uppercase;
            }
        </style>
    @endpush

    @push('js')
        <script src="{{ asset('assets/js/modules/alert.js') }}"></script>
        <script src="{{ asset('assets/js/modules/excelTable.js') }}"></script>
        <script src="{{ asset('assets/js/modules/shortcut.js') }}"></script>
        <script src="{{ asset('assets/js/global.js') }}"></script>
        <script>
            $(document).ready(function() {


                var psItems = @json($psItemsJs);
                var useIdPsMode = true; // tracks current toggle state

                // ── Init Select2 for ID PS ───────────────────────────────────
                $('#id_ps').select2({
                    placeholder: '-- Pilih ID PS --',
                    allowClear: true,
                    width: '100%'
                });

                // ── Enter key: konfirmasi pilihan ID PS di Select2 ───────────
                // Saat dropdown Select2 terbuka dan user tekan Enter, otomatis trigger change
                $(document).on('keydown', '.select2-search__field', function(e) {
                    if (e.key === 'Enter' || e.keyCode === 13) {
                        // Biarkan Select2 memilih item, lalu trigger change setelah sedikit delay
                        setTimeout(function() {
                            var val = $('#id_ps').val();
                            if (val) {
                                $('#id_ps').trigger('change');
                            }
                        }, 100);
                    }
                });

                // ── Toggle: switch between ID-PS mode & manual mode ──────────────
                function applyModeToggle(isOn) {
                    useIdPsMode = isOn;
                    if (isOn) {
                        // Mode ID PS: show ID PS section + PS cards; hide manual card
                        $('#section-id-ps').show();
                        $('#card-manual-entry').slideUp();
                        // Retrigger PS cards based on selected id_ps
                        if ($('#id_ps').val()) {
                            $('#card-ps-detail, #card-ps-items').show();
                        }
                        // Re-add required on id_ps select
                        $('#id_ps').attr('required', true);
                    } else {
                        // Mode Manual: hide ID PS section + PS cards; show manual card
                        $('#section-id-ps').hide();
                        $('#card-ps-detail, #card-ps-items').slideUp();
                        $('#card-manual-entry').slideDown();
                        // Remove required on id_ps select
                        $('#id_ps').removeAttr('required').val(null).trigger('change');
                        // Auto-add at least 1 row if none yet
                        if ($('#tbody-manual tr').length === 0) {
                            addManualRow();
                        }
                    }
                }

                $('#use_id_ps').on('change', function() {
                    applyModeToggle($(this).is(':checked'));
                });

                // Initial state
                applyModeToggle($('#use_id_ps').is(':checked'));

                // ── Manual row management ──────────────────────────────────────
                var manualRowCounter = 0;

                function addManualRow() {
                    manualRowCounter++;
                    var n = manualRowCounter;
                    var inpM = function(nm, cls, ph) {
                        return '<input type="text" class="form-control form-control-sm' + (cls ? ' ' + cls : '') +
                            '" name="' + nm + '[]" placeholder="' + (ph || '') +
                            '" oninput="this.value=this.value.toUpperCase()">';
                    };
                    var row = '<tr class="manual-row">' +
                        '<td class="text-center text-sm align-middle">' + n + '</td>' +
                        '<td>' + inpM('manual_material', 'auto-upper') + '</td>' +
                        '<td>' + inpM('manual_gsm', '', '') + '</td>' +
                        '<td>' + inpM('manual_roll', 'auto-upper', '') + '</td>' +
                        '<td>' + inpM('manual_jumbo', 'auto-upper', '') + '</td>' +
                        '<td>' + inpM('manual_color', '', '') + '</td>' +
                        '<td>' + inpM('manual_width', '', '') + '</td>' +
                        '<td>' + inpM('manual_length', '', '') + '</td>' +
                        '<td>' + inpM('manual_grade', 'auto-upper', '') + '</td>' +
                        '<td><input type="number" class="form-control form-control-sm text-center bg-light" name="manual_qty[]" value="1" readonly></td>' +
                        '<td><input type="text" class="form-control form-control-sm text-center" name="manual_uom[]" oninput="this.value=this.value.toUpperCase()"></td>' +
                        '<td>' +
                        '<input type="text" class="form-control form-control-sm" name="manual_remark[]" placeholder="Catatan" oninput="this.value=this.value.toUpperCase()">' +
                        '</td>' +
                        '<td class="text-center align-middle"><button type="button" class="btn btn-sm btn-link text-danger mb-0 btn-remove-manual-row" title="Hapus"><i class="fas fa-trash-alt"></i></button></td>' +
                        '</tr>';
                    $('#tbody-manual').append(row);
                    renumberManualRows();
                }

                function renumberManualRows() {
                    $('#tbody-manual tr').each(function(i) {
                        $(this).find('td:first').text(i + 1);
                    });
                }

                $('#btn-add-manual-row').on('click', function() {
                    addManualRow();
                });

                $(document).on('click', '.btn-remove-manual-row', function() {
                    if ($('#tbody-manual tr').length <= 1) {
                        Swal.fire('Info', 'Minimal 1 baris harus diisi.', 'info');
                        return;
                    }
                    $(this).closest('tr').remove();
                    renumberManualRows();
                });

                function normalizeStatus(rawStatus) {
                    var status = String(rawStatus || 'notset').toLowerCase();
                    if (['notset', 'partial', 'full'].indexOf(status) === -1) {
                        status = 'notset';
                    }
                    return status;
                }

                function toInt(val) {
                    var num = parseInt(val, 10);
                    return isNaN(num) ? 0 : num;
                }

                function renderItemRow(i, item, isPsFullyLocked) {
                    var detailId = item.detail_id || '';
                    var itemNumber = item.item_number || '';
                    var matCode = item.material_code || '-';
                    var itemStatus = normalizeStatus(item.item_status);
                    var itemUnit = (item.sales_unit || '').toUpperCase();
                    var isFull = itemStatus === 'full';
                    var qtyRemaining = toInt(item.qty_remaining);
                    var isRejected = item.flag_rejection === '1';
                    var sourceMaterial = String(item.sumber_material || '').trim().toLowerCase();
                    var isBackupQaPpic = sourceMaterial.indexOf('backup') === 0 &&
                        sourceMaterial.endsWith('/ppic');
                    var canCreatePps = String(item.can_create_pps) === '1';
                    var isDelivered = isPsFullyLocked || isFull || qtyRemaining <= 0;
                    var needsProduction = isBackupQaPpic && !canCreatePps && !isDelivered;

                    // Lock jika: (1) seluruh PS sudah full, (2) item sendiri full,
                    // (3) qty_remaining = 0, atau (4) syarat pembuatan PPS belum terpenuhi
                    var isRowLocked = isDelivered || !canCreatePps;

                    var rejectionBadge = isRejected ?
                        '<span class="badge bg-danger text-xs ms-2">REJECT FROM SAP</span>' :
                        '';

                    var productionNote = needsProduction ?
                        '<div class="text-warning text-xs mt-1"><i class="fas fa-info-circle me-1"></i>' +
                        'Harus diproduksi terlebih dahulu sebelum membuat PPS.</div>' :
                        '';

                    var pilihCell;
                    if (isDelivered) {
                        pilihCell =
                            '<span class="badge text-xs" style="background-image: linear-gradient(310deg, #00b7bd 0%, #00e573 100%); color: white;">Delivery</span>';
                    } else if (!canCreatePps) {
                        pilihCell = '<span class="badge bg-warning text-white text-xs">' +
                            (needsProduction ? 'Menunggu Produksi' : 'Belum Siap') + '</span>';
                    } else {
                        pilihCell = '<div class="form-check d-flex justify-content-center mb-0">' +
                            '<input class="form-check-input item-select" type="checkbox" name="selected_indexes[]" value="' +
                            i + '" data-unit="' + itemUnit + '"' + (isRejected ? ' disabled' : '') + '>' +
                            '</div>';
                    }

                    var inp = function(name, val, isReadonly, extraClass, isUpper) {
                        var cls = (extraClass ? ' ' + extraClass : '') + (isUpper ? ' auto-upper' : '');
                        var attrs = isReadonly ? ' readonly class="form-control form-control-sm bg-light' + cls +
                            '"' : ' class="form-control form-control-sm' + cls + '"';
                        var onInput = isUpper ? ' oninput="this.value = this.value.toUpperCase()"' : '';
                        return '<input type="text"' + attrs + ' name="' + name + '[]" value="' + (val !== null &&
                            val !== undefined ? val : '') + '"' + onInput + '>';
                    };

                    // Qty selalu 1 per row
                    var qtyInput =
                        '<input type="number" name="item_qty[]" value="1" readonly class="form-control form-control-sm bg-light text-center inp-qty">';

                    // No Roll, Grade, Remark: hanya pre-fill jika row LOCKED (sudah generated, tampilkan nilai lama)
                    // Jika tidak locked → kosong agar user mengisi sendiri tanpa default dari PS
                    var rollVal = isRowLocked ? (item.no_roll || '') : '';
                    var jumboVal = isRowLocked ? (item.no_jumbo || '') : '';
                    var gradeVal = isRowLocked ? (item.grade || '') : '';
                    var remarkVal = isRowLocked ? (item.remark || '') : '';
                    var uomVal = item.sales_unit ? item.sales_unit.toUpperCase() : '';
                    var rowStyle = isRejected ? 'style="background-color: #ffe6e6;"' : (needsProduction ? 'style="background-color: #fff3cd;"' : '');

                    return '<tr class="item-row" data-detail-id="' + itemNumber + '" data-unit="' + itemUnit + '" ' +
                        rowStyle + '>' +
                        '<td class="text-center text-sm">' + (i + 1) + '</td>' +
                        '<td class="text-center text-sm">' +
                        '<input type="hidden" name="item_detail_id[]" value="' + itemNumber + '">' +
                        pilihCell +
                        '</td>' +
                        '<td class="text-sm font-weight-bold">' + matCode + rejectionBadge + productionNote + '</td>' +
                        '<td>' + inp('item_gsm', item.gsm, true) + '</td>' +
                        '<td>' + inp('item_roll', rollVal, true, 'inp-roll pps-editable', true) + '</td>' +
                        '<td>' + inp('item_nomor_jumbo', jumboVal, true, 'inp-jumbo pps-editable', true) + '</td>' +
                        '<td>' + inp('item_color', item.color, true) + '</td>' +
                        '<td>' + inp('item_width', item.width, true) + '</td>' +
                        '<td>' + inp('item_length', item.length, true) + '</td>' +
                        '<td>' + inp('item_grade', gradeVal, true, 'pps-editable', true) + '</td>' +
                        '<td>' + qtyInput + '</td>' +
                        '<td><input type="text" class="form-control form-control-sm text-center bg-light" name="item_uom[]" value="' +
                        uomVal + '" readonly></td>' +
                        '<td>' + inp('item_remark', remarkVal, true, 'pps-editable', true) + '</td>' +
                        '</tr>';
                }

                function updateSelectedCount() {
                    var selectableItems = $('.item-select:not(:disabled)');
                    var selectedItems = selectableItems.filter(':checked');
                    var cnt = selectedItems.length;
                    var total = selectableItems.length;
                    var checkAll = $('#check-all-items');

                    $('#selected-item-count').text(cnt + ' item dipilih');
                    checkAll
                        .prop('disabled', total === 0)
                        .prop('checked', total > 0 && cnt === total)
                        .prop('indeterminate', cnt > 0 && cnt < total);
                }

                function setPsFullLockState(isLocked) {
                    var warning = $('#ps-full-warning');
                    var saveBtn = $('#btn-save-pps');

                    if (isLocked) {
                        warning.removeClass('d-none');
                        saveBtn.prop('disabled', true).addClass('disabled');
                    } else {
                        warning.addClass('d-none');
                        saveBtn.prop('disabled', false).removeClass('disabled');
                    }
                }

                // ── Event: pilih ID PS ───────────────────────────────────────────────
                $('#id_ps').on('change', function() {
                    var idPs = $(this).val();
                    var option = $(this).find('option:selected');

                    if (!idPs) {
                        $('#selected-item-count').text('0 item dipilih');
                        setPsFullLockState(false);
                        $('#card-ps-detail, #card-ps-items').slideUp();
                        return;
                    }

                    // Auto-fill info PS
                    $('#badge-id-ps').text(idPs);
                    $('#disp_ps_date').val(option.data('ps_date') || '-');
                    $('#disp_customer').val(option.data('customer') || '-');
                    $('#disp_customer_ship_to').val(option.data('customer-ship-to') || '-');
                    $('#disp_end_user').val(option.data('end_user') || '-');
                    $('#disp_salesman').val(option.data('salesman') || '-');
                    $('#disp_alamat').val(option.data('alamat') || '-');

                    $('#card-ps-detail, #card-ps-items').slideDown();

                    var tbody = $('#tbody-items').empty();
                    var items = psItems[idPs] || [];
                    var allItemsFull = items.length > 0 && items.every(function(item) {
                        return normalizeStatus(item.item_status) === 'full';
                    });

                    if (items.length === 0) {
                        tbody.append(
                            '<tr><td colspan="13" class="text-center text-secondary text-sm py-3">' +
                            'Tidak ada item untuk PS ini.</td></tr>'
                        );
                        updateSelectedCount();
                        setPsFullLockState(false);
                    } else {
                        console.log("Items ", items);
                        $.each(items, function(i, item) {
                            tbody.append(renderItemRow(i, item, allItemsFull));
                        });
                        updateSelectedCount();
                        setPsFullLockState(allItemsFull);
                    }
                });

                function toggleItemInputs(checkbox) {
                    var row = $(checkbox).closest('tr');
                    var isSelected = $(checkbox).is(':checked') && !$(checkbox).is(':disabled');

                    row.find('.pps-editable')
                        .prop('readonly', !isSelected)
                        .toggleClass('bg-light', !isSelected);
                }

                $('#check-all-items').on('change', function() {
                    var shouldSelect = $(this).is(':checked');

                    $('.item-select:not(:disabled)').each(function() {
                        $(this).prop('checked', shouldSelect);
                        toggleItemInputs(this);
                    });

                    updateSelectedCount();
                });

                $(document).on('change', '.item-select', function() {
                    toggleItemInputs(this);
                    updateSelectedCount();
                });

                // ── Retrigger jika ada old() value ───────────────────────────────────
                @if (old('id_ps'))
                    $('#id_ps').trigger('change');
                @endif

                // ── Autoload jika ada preselect_id_ps (dari halaman edit) ─────────
                @if (!empty($preselect_id_ps))
                    $(function() {
                        setTimeout(function() {
                            $('#id_ps').val('{{ $preselect_id_ps }}').trigger('change');
                        }, 200);
                    });
                @endif

                // ── Preview popup before submitting ──────────────────────────────
                $('#btn-save-pps').on('click', function() {
                    if ($(this).prop('disabled')) {
                        Swal.fire('Info',
                            'Semua material pada ID PS ini sudah FULL. Tidak ada item yang bisa diajukan lagi.',
                            'info');
                        return;
                    }

                    // ── MODE MANUAL ──
                    if (!useIdPsMode) {
                        var rows = $('#tbody-manual tr');
                        if (rows.length === 0) {
                            Swal.fire('Peringatan', 'Tambahkan minimal 1 baris item.', 'warning');
                            return;
                        }
                        var valid = true;
                        rows.each(function() {
                            var mat = $(this).find('input[name="manual_material[]"]').val();
                            var qty = parseInt($(this).find('input[name="manual_qty[]"]').val(), 10);
                            if (!mat || mat.trim() === '' || isNaN(qty) || qty <= 0) {
                                valid = false;
                                return false;
                            }
                        });
                        if (!valid) {
                            Swal.fire('Peringatan', 'PP/PET dan Qty wajib diisi pada setiap baris.', 'warning');
                            return;
                        }
                        // Hitung total baris PPS = sum of qty
                        var totalManual = 0;
                        rows.each(function() {
                            totalManual += parseInt($(this).find('input[name="manual_qty[]"]').val(),
                                10) || 0;
                        });
                        Swal.fire({
                            title: 'Generate PPS Manual?',
                            html: rows.length + ' item &rarr; <strong>' + totalManual +
                                ' baris PPS</strong>',
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonColor: '#3085d6',
                            cancelButtonColor: '#6c757d',
                            confirmButtonText: 'Ya, Generate',
                            cancelButtonText: 'Batal'
                        }).then(function(result) {
                            if (result.isConfirmed) {
                                var btn = $('#btn-save-pps');
                                btn.prop('disabled', true).html(
                                    '<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');
                                $('#form-genpps').submit();
                            }
                        });
                        return;
                    }

                    // ── MODE ID PS ──
                    var idPs = $('#id_ps').val();
                    var selectedCount = $('.item-select:checked').length;

                    if (!idPs) {
                        Swal.fire('Peringatan', 'Silakan pilih ID PS terlebih dahulu.', 'warning');
                        return;
                    }

                    if (selectedCount === 0) {
                        Swal.fire('Peringatan', 'Pilih minimal 1 item (kode material) untuk dibuatkan PPS.',
                            'warning');
                        return;
                    }

                    var hasSelectableSelection = false;
                    $('.item-select:checked').each(function() {
                        var row = $(this).closest('tr');
                        var detailId = row.data('detail-id');
                        var item = psItems[idPs].find(function(i) {
                            return String(i.item_number) === String(detailId) || String(i.detail_id) === String(detailId);
                        });
                        if (item && String(item.can_create_pps) === '1') {
                            hasSelectableSelection = true;
                            return false;
                        }
                    });

                    if (!hasSelectableSelection) {
                        Swal.fire('Peringatan', 'Pilih minimal 1 item yang sudah diproduksi untuk dibuatkan PPS.',
                            'warning');
                        return;
                    }

                    // VALIDASI ROL WAJIB ISI NO ROLL
                    var missingRoll = false;
                    $('.item-select:checked').each(function() {
                        var row = $(this).closest('tr');
                        var unit = String(row.data('unit') || '').toUpperCase();
                        var rollVal = row.find('.inp-roll').val();

                        if (unit === 'ROL' && (!rollVal || rollVal.trim() === '')) {
                            missingRoll = true;
                            row.find('.inp-roll').addClass('is-invalid').css('border-color', '#ea0606');
                        } else {
                            row.find('.inp-roll').removeClass('is-invalid').css('border-color', '');
                        }
                    });

                    if (missingRoll) {
                        Swal.fire('Peringatan', 'Beberapa material dengan satuan ROL wajib mengisi No Roll.',
                            'warning');
                        return;
                    }

                    // ── Tampilkan modal preview ────────────────────────────────────
                    var tbodyPreview = $('#tbody-preview').empty();
                    var totalRows = 0;
                    $('#modal-id-ps-label').text(idPs);

                    var idx = 0;
                    $('.item-select:checked').each(function() {
                        var row = $(this).closest('tr');
                        var matCode = row.find('td:nth-child(3)').text().trim();
                        var gsm = row.find('input[name="item_gsm[]"]').val() || '-';
                        var roll = row.find('input[name="item_roll[]"]').val() || '-';
                        var jumbo = row.find('input[name="item_nomor_jumbo[]"]').val() || '-';
                        var color = row.find('input[name="item_color[]"]').val() || '-';
                        var width = row.find('input[name="item_width[]"]').val() || '-';
                        var length = row.find('input[name="item_length[]"]').val() || '-';
                        var grade = row.find('input[name="item_grade[]"]').val() || '-';
                        var remark = row.find('input[name="item_remark[]"]').val() || '-';
                        var uom = row.find('input[name="item_uom[]"]').val() || '-';

                        var qty = parseInt(row.find('.inp-qty').val(), 10) || 0;
                        totalRows += qty;
                        idx++;

                        tbodyPreview.append(
                            '<tr>' +
                            '<td class="text-center text-sm">' + idx + '</td>' +
                            '<td class="text-sm font-weight-bold">' + matCode + '</td>' +
                            '<td class="text-center text-sm">' + gsm + '</td>' +
                            '<td class="text-center text-sm">' + roll + '</td>' +
                            '<td class="text-center text-sm">' + jumbo + '</td>' +
                            '<td class="text-center text-sm">' + color + '</td>' +
                            '<td class="text-center text-sm">' + width + '</td>' +
                            '<td class="text-center text-sm">' + length + '</td>' +
                            '<td class="text-center text-sm">' + grade + '</td>' +
                            '<td class="text-center text-sm font-weight-bold text-primary">' + qty +
                            '</td>' +
                            '<td class="text-center text-sm">' + uom + '</td>' +
                            '<td class="text-sm">' + remark + '</td>' +
                            '</tr>'
                        );
                    });
                    $('#preview-total-rows').text(totalRows + ' baris');
                    var modal = new bootstrap.Modal(document.getElementById('modalPreviewItems'));
                    modal.show();
                });

                // ── Confirm button inside modal ───────────────────────────────────
                $('#btn-confirm-generate').on('click', function() {
                    var btnConfirm = $(this);
                    var btnSave = $('#btn-save-pps');

                    // Disable both buttons to be extra safe
                    btnConfirm.prop('disabled', true).html(
                        '<i class="fas fa-spinner fa-spin me-1"></i> Memproses...');
                    btnSave.prop('disabled', true).html(
                        '<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');

                    bootstrap.Modal.getInstance(document.getElementById('modalPreviewItems')).hide();
                    $('#form-genpps').submit();
                });

                // ── Keyboard shortcuts for modal ──────────────────────────────────
                $('#modalPreviewItems').on('keydown', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        $('#btn-confirm-generate').click();
                    } else if (e.key === 'Backspace') {
                        // Jangan cegah backspace jika user sedang fokus ke input (meski di modal ini tidak ada input)
                        if ($(e.target).is('input, textarea')) return;
                        e.preventDefault();
                        bootstrap.Modal.getInstance(document.getElementById('modalPreviewItems')).hide();
                    }
                });

                // ── Flash message ─────────────────────────────────────────────────────
                @if (Session::has('message'))
                    @php
                        $msg = Session::pull('message');
                        $cls = Session::pull('class', 'info');
                        $icon = $cls === 'success' ? 'success' : ($cls === 'danger' || $cls === 'error' ? 'error' : 'info');
                    @endphp
                    Swal.fire({
                        icon: '{{ $icon }}',
                        title: '{{ $cls === 'success' ? 'Berhasil!' : 'Info' }}',
                        text: '{{ addslashes($msg) }}',
                        timer: 3500,
                        timerProgressBar: true
                    });
                @endif

            });
        </script>
    @endpush
@endsection