@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <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">
                        <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->edit == '1')
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); document.getElementById('extmem-form').submit();">
                                <i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">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 . '/' . encrypt($list->id)) }}"
                    id="extmem-form">
                    @csrf
                    @method('PUT')

                    {{-- Card Ext Memo --}}
                    <div class="card mb-4">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Edit {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Date <span class="text-danger">*</span></label>
                                        @php
                                            $dateValue = old('date', $list->date ?? '');
                                            // Convert Y-m-d to d-m-Y for display
                                            if ($dateValue) {
                                                $dateValueFormatted = date('d-m-Y', strtotime($dateValue));
                                            } else {
                                                $dateValueFormatted = date('d-m-Y');
                                            }
                                        @endphp
                                        <input class="form-control datepicker" type="text" name="date_display"
                                            id="date" value="{{ $dateValueFormatted }}" placeholder="dd-mm-yyyy"
                                            required readonly style="background-color: #e9ecef;">
                                        <input type="hidden" name="date" id="date_hidden" value="{{ $dateValue }}">
                                        @error('date')
                                            <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Memo No <span class="text-danger">*</span></label>
                                        <input class="form-control" type="text" name="memo_no"
                                            value="{{ old('memo_no', $list->memo_no) }}" maxlength="20" readonly>
                                        @error('memo_no')
                                            <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Supplier <span
                                                class="text-danger">*</span></label>
                                        <div class="input-group">
                                            @php
                                                $supplierNameValue = old('supplier_name', '');
                                                if (empty($supplierNameValue) && isset($list) && $list->id_supplier) {
                                                    $selectedSupplier = $suppliers->firstWhere(
                                                        'id',
                                                        $list->id_supplier,
                                                    );
                                                    if ($selectedSupplier) {
                                                        $supplierNameValue = $selectedSupplier->to;
                                                    }
                                                }
                                            @endphp
                                            <input type="text" class="form-control" id="supplier_name"
                                                value="{{ $supplierNameValue }}" placeholder="Pilih Supplier" readonly
                                                required>
                                            <input type="hidden" name="id_supplier" id="id_supplier"
                                                value="{{ old('id_supplier', $list->id_supplier ?? '') }}" required>
                                            <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                                data-bs-target="#searchModalSupplier"
                                                style="border-color:#d2d6da;border-left:3px solid #d2d6da;cursor: pointer;">
                                                <i class="fas fa-search"></i>
                                            </span>
                                        </div>
                                        @error('id_supplier')
                                            <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Subject <span class="text-danger">*</span></label>
                                        <input class="form-control" type="text" name="subject"
                                            value="{{ old('subject', 'Matching Color') }}" readonly>
                                        @error('subject')
                                            <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">PIC <span class="text-danger">*</span></label>
                                        <select class="form-select" name="from" required>
                                            <option value="">Pilih PIC</option>
                                            @if(isset($pic_options) && $pic_options && count($pic_options) > 0)
                                                @foreach($pic_options as $pic)
                                                    <option value="{{ $pic->value }}" {{ old('from', $list->from ?? '') == $pic->value ? 'selected' : '' }}>
                                                        {{ $pic->name }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                        @error('from')
                                            <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Type <span class="text-danger">*</span></label>
                                        @php
                                            $actionOptions = [
                                                'Urgent',
                                                'For Review',
                                                'Please Comment',
                                                'Please Reply',
                                                'Please Recycle',
                                            ];
                                            $selectedActions = old('actions');
                                            if (!$selectedActions && $list->actions) {
                                                $selectedActions = is_string($list->actions)
                                                    ? json_decode($list->actions, true)
                                                    : $list->actions;
                                                if (!is_array($selectedActions)) {
                                                    $selectedActions = [];
                                                }
                                            } else {
                                                $selectedActions = $selectedActions ?: [];
                                            }
                                        @endphp
                                        <div class="mt-2">
                                            @foreach ($actionOptions as $action)
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" name="actions[]"
                                                        value="{{ $action }}"
                                                        id="action_{{ str_replace(' ', '_', $action) }}"
                                                        {{ in_array($action, $selectedActions) ? 'checked' : '' }}>
                                                    <label class="form-check-label"
                                                        for="action_{{ str_replace(' ', '_', $action) }}">
                                                        {{ $action }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                        @error('actions')
                                            <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                        @enderror
                                        @error('actions.*')
                                            <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Card External Memo Details --}}
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <p class="text-uppercase text-sm mb-0">External Memo Details</p>
                                <button type="button" class="btn btn-sm btn-success" onclick="addDetailRow()">
                                    <i class="fas fa-plus me-1"></i> Tambah Detail
                                </button>
                            </div>
                            <hr class="horizontal dark mt-0">
                            <div class="table-responsive">
                                <table class="table" id="details-table">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="50">No</th>
                                            <th>Request No <span class="text-danger">*</span></th>
                                            <th width="100">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="details-tbody">
                                        @php
                                            $existingDetails = old('details');
                                            if (!$existingDetails && $details) {
                                                if (is_object($details) && method_exists($details, 'map')) {
                                                    $existingDetails = $details
                                                        ->map(function ($item) {
                                                            return [
                                                                'request_no' =>
                                                                    $item->request_no ?? ($item['request_no'] ?? ''),
                                                            ];
                                                        })
                                                        ->toArray();
                                                } elseif (is_array($details)) {
                                                    $existingDetails = array_map(function ($item) {
                                                        return [
                                                            'request_no' => is_object($item)
                                                                ? $item->request_no
                                                                : $item['request_no'] ?? '',
                                                        ];
                                                    }, $details);
                                                }
                                            }
                                        @endphp
                                        @if ($existingDetails && count($existingDetails) > 0)
                                            @foreach ($existingDetails as $index => $detail)
                                                @php
                                                    $selectedRequestNo = $detail['request_no'] ?? '';
                                                    $selectedRequestInq = $request_inqs->firstWhere(
                                                        'request_no',
                                                        $selectedRequestNo,
                                                    );
                                                @endphp
                                                <tr>
                                                    <td>{{ $index + 1 }}</td>
                                                    <td>
                                                        <div class="input-group">
                                                            <input type="text" class="form-control request-no-input"
                                                                name="details[{{ $index }}][request_no_display]"
                                                                value="{{ $selectedRequestInq ? $selectedRequestInq->request_no : '' }}"
                                                                placeholder="Pilih Request No" readonly required>
                                                            <input type="hidden" class="request-no-hidden"
                                                                name="details[{{ $index }}][request_no]"
                                                                value="{{ $selectedRequestNo }}" required>
                                                            <span
                                                                class="input-group-text bg-primary text-light request-no-search-btn"
                                                                data-row-index="{{ $index }}"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#searchModalRequestNo"
                                                                style="border-color:#d2d6da;border-left:3px solid #d2d6da;cursor: pointer;">
                                                                <i class="fas fa-search"></i>
                                                            </span>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-sm btn-danger"
                                                            onclick="removeDetailRow(this)">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal Search Supplier -->
    <div class="modal fade" id="searchModalSupplier" tabindex="-1" role="dialog"
        aria-labelledby="searchModalSupplierLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="searchModalSupplierLabel">
                        List Supplier
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body table-responsive">
                    <table class="table display" id="list_supplier">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th width="20px">Action</th>
                                <th>ID</th>
                                <th>Nama Perusahaan</th>
                                <th>Nama Supplier</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($suppliers as $supplier)
                                <tr>
                                    <td width="20px">
                                        <span class="btn badge bg-primary badge-lg"
                                            onclick="selectSupplier({{ $supplier->id }}, '{{ addslashes($supplier->to) }}', '{{ addslashes($supplier->as ?? '') }}')">
                                            <i class="bi bi-check-circle me-1"></i> Select
                                        </span>
                                    </td>
                                    <td>{{ $supplier->id }}</td>
                                    <td>{{ $supplier->to }}</td>
                                    <td>{{ $supplier->attn }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Search Request No -->
    <div class="modal fade" id="searchModalRequestNo" tabindex="-1" role="dialog"
        aria-labelledby="searchModalRequestNoLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="searchModalRequestNoLabel">
                        List Request No
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body table-responsive">
                    <table class="table display" id="list_request_no">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th width="20px">Action</th>
                                <th>Request No</th>
                                <th>Date</th>
                                <th>Customer Name</th>
                                <th>Customer Color Code</th>
                                <th>GSM</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($request_inqs as $request_inq)
                                <tr>
                                    <td width="20px">
                                        <span class="btn badge bg-primary badge-lg btn-select-request-no"
                                            data-request-no="{{ $request_inq->request_no }}"
                                            onclick="selectRequestNo('{{ $request_inq->request_no }}', '{{ addslashes($request_inq->request_no) }}')">
                                            <i class="bi bi-check-circle me-1"></i> Select
                                        </span>
                                    </td>
                                    <td>{{ $request_inq->request_no }}</td>
                                    <td>{{ date('d/m/Y', strtotime($request_inq->date)) }}</td>
                                    <td>{{ $request_inq->customer_name }}</td>
                                    <td>{{ $request_inq->customer_color_code }}</td>
                                    <td>{{ $request_inq->basic_weight }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <!-- Flatpickr CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <!-- Flatpickr JS -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        let detailIndex = {{ old('details') ? count(old('details')) : ($details ? count($details) : 0) }};
        const requestInqs = @json($request_inqs);
        let currentRowIndex = null; // Untuk menyimpan row index yang sedang dipilih

        function getSelectedRequestNos(excludeRowIndex = null) {
            const hiddenInputs = document.querySelectorAll('.request-no-hidden');
            const selected = [];
            hiddenInputs.forEach((input, index) => {
                const row = input.closest('tr');
                const rowIndex = Array.from(row.parentNode.children).indexOf(row);
                if (rowIndex !== excludeRowIndex && input.value) {
                    selected.push(input.value);
                }
            });
            return selected;
        }

        function getAvailableRequestNos() {
            const selected = getSelectedRequestNos();
            return requestInqs
                .map((item) => item.request_no)
                .filter((value) => !selected.includes(value));
        }

        // Function to check if all existing rows have selected request no
        function checkAllRowsHaveRequestNo() {
            const tbody = document.getElementById('details-tbody');
            const rows = tbody.querySelectorAll('tr');

            for (let i = 0; i < rows.length; i++) {
                const hiddenInput = rows[i].querySelector('.request-no-hidden');
                if (hiddenInput && !hiddenInput.value) {
                    return false;
                }
            }
            return true;
        }

        function addDetailRow() {
            // Check if all existing rows have selected request no
            if (!checkAllRowsHaveRequestNo()) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Silakan pilih Request No pada baris yang sudah ada terlebih dahulu sebelum menambah baris baru!',
                    confirmButtonText: 'OK'
                });
                return;
            }

            const availableRequestNos = getAvailableRequestNos();

            if (availableRequestNos.length === 0) {
                Swal.fire({
                    icon: 'info',
                    title: 'Tidak ada Request No tersedia',
                    text: 'Semua Request No sudah dipilih.',
                    confirmButtonText: 'OK'
                });
                return;
            }

            const tbody = document.getElementById('details-tbody');
            const row = document.createElement('tr');
            const rowIndex = tbody.children.length;

            row.innerHTML = `
                <td>${rowIndex + 1}</td>
                <td>
                    <div class="input-group">
                        <input type="text" 
                            class="form-control request-no-input" 
                            name="details[${detailIndex}][request_no_display]" 
                            placeholder="Pilih Request No" 
                            readonly 
                            required>
                        <input type="hidden" 
                            class="request-no-hidden" 
                            name="details[${detailIndex}][request_no]" 
                            required>
                        <span class="input-group-text bg-primary text-light request-no-search-btn"
                            data-row-index="${rowIndex}"
                            data-bs-toggle="modal"
                            data-bs-target="#searchModalRequestNo"
                            style="border-color:#d2d6da;border-left:3px solid #d2d6da;cursor: pointer;">
                            <i class="fas fa-search"></i>
                        </span>
                    </div>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger" onclick="removeDetailRow(this)">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            `;

            tbody.appendChild(row);
            detailIndex++;
            updateRowNumbers();

            // Attach click event to the new search button
            const newSearchBtn = row.querySelector('.request-no-search-btn');
            newSearchBtn.addEventListener('click', function() {
                currentRowIndex = parseInt(this.getAttribute('data-row-index'));
            });
        }

        function removeDetailRow(button) {
            const row = button.closest('tr');
            row.remove();
            updateRowNumbers();
        }

        function updateRowNumbers() {
            const tbody = document.getElementById('details-tbody');
            Array.from(tbody.children).forEach(function(row, index) {
                row.children[0].textContent = index + 1;
                // Update data-row-index pada search button
                const searchBtn = row.querySelector('.request-no-search-btn');
                if (searchBtn) {
                    searchBtn.setAttribute('data-row-index', index);
                }
            });
        }

        // Update state of Select buttons in modal: disable if request no already selected in other rows
        function updateRequestNoSelectButtonsState() {
            const selected = getSelectedRequestNos(currentRowIndex);
            const modalTbody = document.querySelector('#list_request_no tbody');
            if (!modalTbody) return;
            modalTbody.querySelectorAll('tr .btn-select-request-no').forEach(function(spanBtn) {
                const dataReqNo = spanBtn.getAttribute('data-request-no');
                const reqNo = (dataReqNo && dataReqNo.trim()) ? dataReqNo.trim() : (spanBtn.closest('tr').querySelector('td:nth-child(2)') || {}).textContent.trim();
                if (selected.includes(reqNo)) {
                    spanBtn.classList.add('request-no-select-disabled');
                    spanBtn.style.pointerEvents = 'none';
                    spanBtn.style.opacity = '0.5';
                    spanBtn.style.cursor = 'not-allowed';
                } else {
                    spanBtn.classList.remove('request-no-select-disabled');
                    spanBtn.style.pointerEvents = '';
                    spanBtn.style.opacity = '';
                    spanBtn.style.cursor = '';
                }
            });
        }

        // Function to select request no from modal
        function selectRequestNo(requestNo, displayText) {
            if (currentRowIndex === null) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Terjadi kesalahan saat memilih Request No.',
                    confirmButtonText: 'OK'
                });
                return;
            }

            const tbody = document.getElementById('details-tbody');
            const rows = tbody.querySelectorAll('tr');

            if (currentRowIndex >= rows.length) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Baris tidak ditemukan.',
                    confirmButtonText: 'OK'
                });
                return;
            }

            const row = rows[currentRowIndex];

            // Check if request no already selected in other rows
            const selectedRequestNos = getSelectedRequestNos(currentRowIndex);
            if (selectedRequestNos.includes(requestNo)) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Request No Sudah Dipilih',
                    text: 'Request No ini sudah dipilih di baris lain. Silakan pilih Request No yang berbeda.',
                    confirmButtonText: 'OK'
                });
                return;
            }

            // Set values
            const displayInput = row.querySelector('.request-no-input');
            const hiddenInput = row.querySelector('.request-no-hidden');

            if (displayInput && hiddenInput) {
                displayInput.value = displayText;
                hiddenInput.value = requestNo;
                displayInput.classList.remove('is-invalid');
            }

            // Close modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('searchModalRequestNo'));
            if (modal) {
                modal.hide();
            }

            currentRowIndex = null;
        }

        // Function to select supplier dari modal (EDIT)
        // Sekarang juga mengubah kode singkatan (as) di memo_no tanpa mengubah counter & bulan/tahun
        function selectSupplier(id, name, asCode) {
            $('#id_supplier').val(id);
            $('#supplier_name').val(name);
            $('#searchModalSupplier').modal('hide');

            // Jika ada memo_no lama, ganti hanya bagian tengah (kode supplier/as)
            // Format: 200.008.AOI.B.26 -> 200.008.{AS_BARU}.B.26
            if (asCode) {
                const memoInput = $('input[name="memo_no"]');
                const currentMemo = memoInput.val();
                if (currentMemo && currentMemo.includes('.')) {
                    const parts = currentMemo.split('.');
                    if (parts.length >= 5) {
                        parts[2] = asCode; // index 2 = kode supplier/as
                        memoInput.val(parts.join('.'));
                    }
                }
            }
        }

        // Validate form before submit
        $(document).ready(function() {
            // Date readonly: jangan init flatpickr supaya tanggal tidak bisa diubah
            if (document.getElementById('date')) {
                const $dateInput = $('#date');
                if (!$dateInput.prop('readonly')) {
                    if (typeof flatpickr !== 'undefined') {
                        flatpickr('#date', {
                            dateFormat: 'd-m-Y',
                            altInput: false,
                            allowInput: true,
                            onChange: function(selectedDates, dateStr, instance) {
                                if (selectedDates.length > 0) {
                                    const selectedDate = selectedDates[0];
                                    const year = selectedDate.getFullYear();
                                    const month = String(selectedDate.getMonth() + 1).padStart(2, '0');
                                    const day = String(selectedDate.getDate()).padStart(2, '0');
                                    $('#date_hidden').val(year + '-' + month + '-' + day);
                                }
                            }
                        });
                    }
                }
                const displayValue = $('#date').val();
                if (displayValue) {
                    const parts = displayValue.split('-');
                    if (parts.length === 3) {
                        const year = parts[2];
                        const month = parts[1];
                        const day = parts[0];
                        $('#date_hidden').val(year + '-' + month + '-' + day);
                    }
                }
            }

            // Attach click event to existing search buttons
            $(document).on('click', '.request-no-search-btn', function() {
                currentRowIndex = parseInt($(this).attr('data-row-index'));
            });

            // Initialize DataTable for supplier modal
            $('#list_supplier').DataTable({
                "language": {
                    "search": "Cari:",
                    "zeroRecords": "Data tidak ada",
                    "info": "Data _START_ - _END_ dari _TOTAL_",
                    "infoEmpty": "Data tidak ditemukan",
                    "infoFiltered": "(pencarian dari _MAX_ data)",
                },
                destroy: true,
                ordering: true,
                order: [
                    [2, 'asc']
                ],
                pageLength: 10,
                responsive: true,
                paging: true,
                searching: true,
                info: true,
                "dom": '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rt<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
            });

            // Initialize DataTable for request no modal
            $('#list_request_no').DataTable({
                "language": {
                    "search": "Cari:",
                    "zeroRecords": "Data tidak ada",
                    "info": "Data _START_ - _END_ dari _TOTAL_",
                    "infoEmpty": "Data tidak ditemukan",
                    "infoFiltered": "(pencarian dari _MAX_ data)",
                },
                destroy: true,
                ordering: true,
                order: [
                    [1, 'asc']
                ],
                pageLength: 5,
                responsive: true,
                drawCallback: function() {
                    if ($('#searchModalRequestNo').hasClass('show')) {
                        updateRequestNoSelectButtonsState();
                    }
                },
            });

            // Saat modal Request No dibuka, nonaktifkan tombol Select untuk request no yang sudah dipilih di baris lain
            $('#searchModalRequestNo').on('shown.bs.modal', function() {
                updateRequestNoSelectButtonsState();
            });

            // Set old value if exists (from validation error)
            @if (old('id_supplier'))
                @php
                    $selectedSupplier = $suppliers->firstWhere('id', old('id_supplier'));
                @endphp
                @if ($selectedSupplier)
                    $('#id_supplier').val('{{ old('id_supplier') }}');
                    $('#supplier_name').val({!! json_encode($selectedSupplier->to) !!});
                @endif
            @elseif (isset($list) && $list->id_supplier)
                @php
                    $selectedSupplier = $suppliers->firstWhere('id', $list->id_supplier);
                @endphp
                @if ($selectedSupplier)
                    $('#id_supplier').val('{{ $list->id_supplier }}');
                    $('#supplier_name').val({!! json_encode($selectedSupplier->to) !!});
                @endif
            @endif

            $('#extmem-form').on('submit', function(e) {
                // Check if supplier is selected
                const supplierId = $('#id_supplier').val();
                if (!supplierId || supplierId === '') {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Silakan pilih Supplier terlebih dahulu!',
                        confirmButtonText: 'OK'
                    });
                    $('#supplier_name').focus();
                    return false;
                }

                const tbody = document.getElementById('details-tbody');
                const rows = tbody.querySelectorAll('tr');

                // Check if there's at least one row
                if (rows.length === 0) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Minimal harus ada 1 Request No yang dipilih!',
                        confirmButtonText: 'OK'
                    });
                    return false;
                }

                // Check if all rows have selected request no
                let hasEmptyRequestNo = false;
                let emptyRowNumbers = [];
                let duplicateRequestNos = [];
                const selectedRequestNos = [];

                rows.forEach(function(row, index) {
                    const hiddenInput = row.querySelector('.request-no-hidden');
                    const displayInput = row.querySelector('.request-no-input');

                    if (hiddenInput) {
                        if (!hiddenInput.value || hiddenInput.value === '') {
                            hasEmptyRequestNo = true;
                            if (displayInput) {
                                displayInput.classList.add('is-invalid');
                            }
                            emptyRowNumbers.push(index + 1);
                        } else {
                            // Check for duplicates
                            if (selectedRequestNos.includes(hiddenInput.value)) {
                                duplicateRequestNos.push({
                                    row: index + 1,
                                    requestNo: hiddenInput.value
                                });
                                if (displayInput) {
                                    displayInput.classList.add('is-invalid');
                                }
                            } else {
                                selectedRequestNos.push(hiddenInput.value);
                                if (displayInput) {
                                    displayInput.classList.remove('is-invalid');
                                }
                            }
                        }
                    }
                });

                if (hasEmptyRequestNo) {
                    e.preventDefault();
                    e.stopPropagation();

                    // Scroll to first invalid input
                    const firstInvalid = document.querySelector('.request-no-input.is-invalid');
                    if (firstInvalid) {
                        firstInvalid.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                        firstInvalid.focus();
                    }

                    Swal.fire({
                        icon: 'error',
                        title: 'Request No Belum Dipilih',
                        html: 'Silakan pilih Request No pada baris: <strong>' + emptyRowNumbers
                            .join(', ') +
                            '</strong><br><br>Semua Request No harus dipilih sebelum menyimpan data!',
                        confirmButtonText: 'OK'
                    });
                    return false;
                }

                if (duplicateRequestNos.length > 0) {
                    e.preventDefault();
                    e.stopPropagation();

                    const duplicateRows = duplicateRequestNos.map(d => `Baris ${d.row}: ${d.requestNo}`)
                        .join('<br>');
                    Swal.fire({
                        icon: 'error',
                        title: 'Request No Duplikat',
                        html: 'Terdapat Request No yang sama dipilih di beberapa baris:<br><br>' +
                            duplicateRows + '<br><br>Silakan pilih Request No yang berbeda!',
                        confirmButtonText: 'OK'
                    });
                    return false;
                }

                return true;
            });
        });
    </script>
@endpush