@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->add == '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) }}" id="extmem-form">
                    @csrf

                    {{-- Card Ext Memo --}}
                    <div class="card mb-4">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $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', date('Y-m-d'));
                                            // 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', $generated_memo_no ?? '') }}" maxlength="20" required
                                            readonly style="background-color: #e9ecef;">
                                        {{-- <small class="text-muted">Memo No akan di-generate otomatis</small> --}}
                                        @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">
                                            <input type="text" class="form-control" id="supplier_name"
                                                value="{{ old('supplier_name', '') }}" placeholder="Pilih Supplier" readonly
                                                required>
                                            <input type="hidden" name="id_supplier" id="id_supplier"
                                                value="{{ old('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') == $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>
                                        <div class="mt-2">
                                            @php
                                                $actionOptions = [
                                                    'Urgent',
                                                    'For Review',
                                                    'Please Comment',
                                                    'Please Reply',
                                                    'Please Recycle',
                                                ];
                                                $oldActions = old('actions', []);
                                                // Default checked untuk Urgent dan Please Reply jika tidak ada old value
                                                $defaultChecked = ['Urgent', 'Please Reply'];
                                                if (empty($oldActions)) {
                                                    $oldActions = $defaultChecked;
                                                }
                                            @endphp
                                            @foreach ($actionOptions as $action)
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input action-checkbox" type="checkbox"
                                                        name="actions[]" value="{{ $action }}"
                                                        id="action_{{ str_replace(' ', '_', $action) }}"
                                                        {{ in_array($action, $oldActions) ? '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">
                            @error('details')
                                <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                            @enderror
                            <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">
                                        @if (old('details'))
                                            @foreach (old('details') 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 @error('details.' . $index . '.request_no') is-invalid @enderror"
                                                                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>
                                                        @error('details.' . $index . '.request_no')
                                                            <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                                        @enderror
                                                    </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) }}')">
                                            <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')) : 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;
        }

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

        // Function to select supplier from modal
        function selectSupplier(id, name) {
            $('#id_supplier').val(id);
            $('#supplier_name').val(name);
            $('#searchModalSupplier').modal('hide');
            
            // Generate memo_no berdasarkan supplier yang dipilih
            generateMemoNoBySupplier(id);
            
            // Load request numbers based on selected supplier
            loadRequestNosBySupplier(id);
        }

        // Function to generate memo_no by supplier via AJAX
        function generateMemoNoBySupplier(supplierId) {
            // Ambil date dari form (format Y-m-d)
            const dateValue = $('#date_hidden').val();
            const date = dateValue || new Date().toISOString().split('T')[0]; // Format Y-m-d
            
            $.ajax({
                url: '{{ URL::to("/extmem/generate-memo-no") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    supplier_id: supplierId,
                    date: date
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        // Update memo_no field
                        $('input[name="memo_no"]').val(response.memo_no);
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message || 'Gagal generate memo_no',
                            confirmButtonText: 'OK'
                        });
                    }
                },
                error: function(xhr) {
                    console.error('Error generating memo_no:', xhr);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan saat generate memo_no',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }

        // Function to load request numbers by supplier via AJAX
        function loadRequestNosBySupplier(supplierId) {
            $.ajax({
                url: '{{ URL::to('/extmem/get-request-nos') }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    supplier_id: supplierId
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        // Destroy existing DataTable if exists
                        if ($.fn.DataTable.isDataTable('#list_request_no')) {
                            $('#list_request_no').DataTable().destroy();
                        }

                        // Clear tbody
                        $('#list_request_no tbody').empty();

                        // Populate with new data
                        if (response.data && response.data.length > 0) {
                            response.data.forEach(function(item) {
                                // Escape single quotes in request_no for onclick attribute
                                const escapedRequestNo = item.request_no.replace(/'/g, "\\'");
                                const escapedDisplay = item.request_no.replace(/'/g, "\\'");

                                const row = $('<tr>').html(`
                                    <td width="20px">
                                        <span class="btn badge bg-primary badge-lg btn-select-request-no"
                                            data-request-no="${escapeHtml(item.request_no)}"
                                            onclick="selectRequestNo('${escapedRequestNo}', '${escapedDisplay}')">
                                            <i class="bi bi-check-circle me-1"></i> Select
                                        </span>
                                    </td>
                                    <td>${escapeHtml(item.request_no)}</td>
                                    <td>${formatDate(item.date)}</td>
                                    <td>${escapeHtml(item.customer_name || '-')}</td>
                                    <td>${escapeHtml(item.customer_color_code || '-')}</td>
                                    <td>${escapeHtml(item.basic_weight || '-')}</td>
                                `);
                                $('#list_request_no tbody').append(row);
                            });
                        } else {
                            $('#list_request_no tbody').append(
                                '<tr><td colspan="6" class="text-center">Tidak ada Request No tersedia untuk supplier ini</td></tr>'
                                );
                        }

                        // Reinitialize DataTable
                        $('#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();
                                }
                            },
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: response.message || 'Gagal memuat Request No',
                            confirmButtonText: 'OK'
                        });
                    }
                },
                error: function(xhr) {
                    console.error('Error loading request numbers:', xhr);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan saat memuat Request No',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }

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

        // Helper function to escape HTML
        function escapeHtml(text) {
            if (!text) return '-';
            const map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            return String(text).replace(/[&<>"']/g, function(m) {
                return map[m];
            });
        }

        // Auto-check Urgent and Please Reply based on type selection
        $(document).on('change', '.action-checkbox', function() {
            const checkbox = $(this);
            const value = checkbox.val();
            const isChecked = checkbox.is(':checked');

            // Get references to Urgent and Please Reply checkboxes
            const urgentCheckbox = $('#action_Urgent');
            const pleaseReplyCheckbox = $('#action_Please_Reply');

            // Types that should auto-check Urgent and Please Reply
            const autoCheckTypes = ['For Review', 'Please Comment', 'Please Recycle'];

            if (autoCheckTypes.includes(value) && isChecked) {
                // Auto-check Urgent and Please Reply when these types are selected
                urgentCheckbox.prop('checked', true);
                pleaseReplyCheckbox.prop('checked', true);
            }

            // If Urgent is checked, also auto-check Please Reply
            if (value === 'Urgent' && isChecked) {
                pleaseReplyCheckbox.prop('checked', true);
            }
        });

            // Initialize DataTable and form validation
            $(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 supplierId = $('#id_supplier').val();
                                        if (supplierId) {
                                            generateMemoNoBySupplier(supplierId);
                                        }
                                    }
                                }
                            });
                        }
                    }
                    // Sync hidden dari display value (untuk readonly atau setelah init)
                    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);
                        }
                    }
                }

            // Auto-check Urgent and Please Reply by default if not already checked
            const urgentCheckbox = $('#action_Urgent');
            const pleaseReplyCheckbox = $('#action_Please_Reply');

            // Check if there are no checked checkboxes (new form, not validation error)
            const checkedCount = $('.action-checkbox:checked').length;
            if (checkedCount === 0) {
                urgentCheckbox.prop('checked', true);
                pleaseReplyCheckbox.prop('checked', true);
            } else {
                // Ensure Please Reply is checked if Urgent is checked
                if (urgentCheckbox.is(':checked') && !pleaseReplyCheckbox.is(':checked')) {
                    pleaseReplyCheckbox.prop('checked', true);
                }
            }

            // 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
            // Only initialize if supplier is not selected, otherwise it will be initialized after supplier is selected
            @if (!old('id_supplier'))
                // If no supplier selected yet, show all request_inqs
                $('#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();
                        }
                    },
                });
            @else
                // If supplier already selected (from validation error), load request nos for that supplier
                loadRequestNosBySupplier('{{ old('id_supplier') }}');
            @endif

            // 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) !!});
                    // Generate memo_no untuk supplier yang sudah dipilih
                    const oldSupplierId = '{{ old('id_supplier') }}';
                    if (oldSupplierId) {
                        generateMemoNoBySupplier(oldSupplierId);
                    }
                    // Request nos will be loaded by the code above
                @endif
            @endif

            // Show warning if user tries to open request no modal without selecting supplier
            $('#searchModalRequestNo').on('show.bs.modal', function() {
                const supplierId = $('#id_supplier').val();
                if (!supplierId || supplierId === '') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Silakan pilih Supplier terlebih dahulu sebelum memilih Request No!',
                        confirmButtonText: 'OK'
                    }).then(() => {
                        // Prevent modal from opening
                        $('#searchModalRequestNo').modal('hide');
                        // Show supplier modal instead
                        $('#searchModalSupplier').modal('show');
                    });
                    return false;
                }
            });

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

            // Validate form before submit
            $('#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;
                }

                // Check if at least one action is selected
                const actionCheckboxes = document.querySelectorAll('.action-checkbox:checked');
                if (actionCheckboxes.length === 0) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Silakan pilih minimal 1 Actions!',
                        confirmButtonText: 'OK'
                    });
                    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