@php
    $isEdit = $form_mode === 'edit';
    $formAction = $isEdit ? url($url_menu . '/' . $idencrypt) : url($url_menu);
    $formMethod = $isEdit ? 'PUT' : 'POST';
    $detailErrors = [];
    $detailRowCount = 0;

    foreach ($detail_fields_visible as $detailField) {
        $detailValues = old('detail.' . $detailField->field, []);
        $detailRowCount = max($detailRowCount, is_array($detailValues) ? count($detailValues) : 0);
    }

    for ($errorRow = 0; $errorRow < $detailRowCount; $errorRow++) {
        foreach ($detail_fields_visible as $detailField) {
            $message = $errors->first('detail.' . $detailField->field . '.' . $errorRow);

            if ($message !== '') {
                $detailErrors[$errorRow][$detailField->field] = $message;
            }
        }
    }

    $detailFieldConfigs = $detail_fields_visible
        ->map(function ($field) {
            return [
                'urut' => $field->urut,
                'field' => $field->field,
                'alias' => $field->alias,
                'type' => $field->type,
                'length' => $field->length,
                'decimals' => $field->decimals,
                'class' => $field->class,
                'options' => $field->options ?? [],
            ];
        })
        ->values();
@endphp

<form method="POST" action="{{ $formAction }}" id="{{ $dmenu }}-form">
    @csrf
    @if ($formMethod === 'PUT')
        @method('PUT')
    @endif

    @foreach ($header_hidden_fields as $field)
        @php
            $hiddenValue = old($field->field, $list?->{$field->field} ?? $field->default);
        @endphp
        @if (!($field->primary == '1' && $has_generate_id))
            <input type="hidden" name="{{ $field->field }}" value="{{ $hiddenValue }}">
        @endif
    @endforeach

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="d-flex flex-wrap gap-2">
                <button type="button" class="btn btn-secondary mb-0" onclick="history.back()">
                    <i class="fas fa-circle-left me-1"></i>Kembali
                </button>
                <button type="submit" class="btn btn-primary mb-0">
                    <i class="fas fa-floppy-disk me-1"></i>Simpan
                </button>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="card">
            <div class="card-body p-4">
                <p class="text-uppercase text-sm mb-3">{{ $isEdit ? 'Edit' : 'Insert' }} {{ $title_menu }}</p>

                @if ($errors->any())
                    <div class="alert alert-danger text-white" role="alert">
                        <strong>Validasi belum sesuai.</strong> Periksa kembali data header dan detail yang ditandai.
                    </div>
                @endif

                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-body p-4">
                        <h5 class="mb-2">Header</h5>
                        @if (!empty($header_has_required))
                            <p class="text-danger text-sm mb-4">(*) wajib diisi.</p>
                        @endif

                        <div class="row">
                            <div class="col-lg-6">
                                @foreach ($header_fields_left as $field)
                                    @include('transc.auto._header_field', ['field' => $field])
                                @endforeach
                            </div>
                            <div class="col-lg-6">
                                @foreach ($header_fields_right as $field)
                                    @include('transc.auto._header_field', ['field' => $field])
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
                            <h5 class="mb-0">Detail {{ $title_menu }}</h5>
                            <button type="button" class="btn btn-primary mb-0" id="transc-add-row">
                                <i class="fas fa-plus me-1"></i>Tambah
                            </button>
                        </div>

                        @if (!empty($detail_has_required))
                            <p class="text-danger text-sm mb-3">(*) kolom bertanda wajib diisi.</p>
                        @endif

                        @error('detail_rows_required')
                            <p class="text-danger text-sm">{{ $message }}</p>
                        @enderror

                        @if (!empty($detailErrors))
                            <p class="text-danger text-sm mb-3">Masih ada data detail yang belum sesuai. Silakan cek
                                pesan error di masing-masing kolom.</p>
                        @endif

                        <div class="table-responsive">
                            <table class="table align-items-center mb-0">
                                <thead style="background-color: #d7eafc;">
                                    <tr>
                                        <th width="120">Action</th>
                                        @foreach ($detail_fields_visible as $field)
                                            <th>{{ $field->alias }}{{ !empty($field->required) ? '*' : '' }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody id="transc-detail-body"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

@foreach (collect($header_fields_left)->merge($header_fields_right)->where('type', 'search') as $field)
    <div class="modal fade" id="searchModal{{ $field->field }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">List {{ $field->alias }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table align-items-center mb-0 transc-search-table"
                            id="list_{{ $dmenu }}_{{ $field->field }}">
                            <thead class="thead-light" style="background-color: #00b7bd4f; display:none;">
                                <tr></tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        <div class="text-center py-3 small text-secondary" id="search-loading-{{ $field->field }}">
                            Klik tombol search untuk memuat data.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

@foreach ($detail_fields_visible->where('type', 'search') as $field)
    <div class="modal fade" id="detailSearchModal{{ $field->field }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">List {{ $field->alias }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table align-items-center mb-0 transc-search-table"
                            id="detail_list_{{ $dmenu }}_{{ $field->field }}">
                            <thead class="thead-light" style="background-color: #00b7bd4f; display:none;">
                                <tr></tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        <div class="text-center py-3 small text-secondary"
                            id="detail-search-loading-{{ $field->field }}">
                            Klik tombol search untuk memuat data.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

@push('addjs')
    <script>
        window.selectTranscSearch = function(field, value, label) {
            $('[name="' + field + '"]').val(value);
            $('#display_' + field).val(label);
            $('#searchModal' + field).modal('hide');
        };

        $(function() {
            let activeDetailSearchTarget = null;
            const loadedHeaderSearchModals = {};
            const loadedDetailSearchModals = {};

            function mountSearchRefreshButton(field, isDetail) {
                const tableId = isDetail ? `#detail_list_{{ $dmenu }}_${field}` :
                    `#list_{{ $dmenu }}_${field}`;
                const wrapper = $(tableId + '_wrapper');

                if (!wrapper.length || wrapper.find('.search-modal-refresh').length) {
                    return;
                }

                const button = $(`
                    <button type="button" class="btn btn-info btn-sm mb-0 ms-2 px-2 py-1 search-modal-refresh"
                        data-field="${field}" data-detail="${isDetail ? 1 : 0}">
                        <i class="fas fa-rotate-right"></i> Refresh
                    </button>
                `);

                wrapper.find('.dataTables_length').append(button);
            }

            function buildSearchRows(rows, field, isDetail) {
                return (rows || []).map((row) => {
                    const values = Object.values(row || {});
                    const value = values[0] ?? '';
                    const label = values[1] ?? value;
                    const buttonClass = isDetail ? 'transc-detail-search-select' : 'transc-search-select';

                    const cells = Object.values(row || {}).map((cell) => `<td>${escapeHtml(cell)}</td>`)
                        .join('');

                    return `
                        <tr>
                            <td>
                                <button type="button" class="btn btn-success btn-sm mb-0 ${buttonClass}"
                                    data-field="${field}"
                                    data-value="${escapeHtml(value)}"
                                    data-label="${escapeHtml(label)}">
                                    Select
                                </button>
                            </td>
                            ${cells}
                        </tr>
                    `;
                }).join('');
            }

            function loadSearchModal(field, modalTitle, forceReload = false, isDetail = false) {
                const tableId = isDetail ? `#detail_list_{{ $dmenu }}_${field}` :
                    `#list_{{ $dmenu }}_${field}`;
                const loadingId = isDetail ? `#detail-search-loading-${field}` : `#search-loading-${field}`;
                const modalId = isDetail ? `#detailSearchModal${field}` : `#searchModal${field}`;
                const loadedStore = isDetail ? loadedDetailSearchModals : loadedHeaderSearchModals;
                const tableElement = $(tableId);
                const thead = tableElement.find('thead');
                const headerRow = thead.find('tr');
                const tbody = tableElement.find('tbody');
                const loadingElement = $(loadingId);

                $(modalId).find('.modal-title').text(`List ${modalTitle || 'Data'}`);

                if (loadedStore[field] && !forceReload) {
                    return;
                }

                $.ajax({
                    url: `{{ url('/form-search-options/' . $url_menu) }}`,
                    method: 'GET',
                    data: {
                        field: field
                    },
                    beforeSend: function() {
                        if ($.fn.DataTable.isDataTable(tableId)) {
                            tableElement.DataTable().clear().destroy();
                        }

                        thead.hide();
                        headerRow.empty();
                        tbody.empty();
                        loadingElement.text('Memuat data...');
                    },
                    success: function(response) {
                        const columns = response.columns || [];
                        const rows = response.rows || [];

                        headerRow.append('<th width="100">Action</th>');
                        columns.forEach((column) => {
                            headerRow.append(`<th>${escapeHtml(column)}</th>`);
                        });

                        tbody.html(buildSearchRows(rows, field, isDetail));
                        thead.show();
                        loadingElement.text('');
                        loadedStore[field] = true;
                        tableElement.DataTable({
                            destroy: true,
                            pageLength: 10,
                            order: []
                        });
                        mountSearchRefreshButton(field, isDetail);
                    },
                    error: function(xhr) {
                        if ($.fn.DataTable.isDataTable(tableId)) {
                            tableElement.DataTable().clear().destroy();
                        }

                        thead.hide();
                        headerRow.empty();
                        tbody.empty();
                        loadingElement.text(xhr.status === 404 ? 'Field search tidak ditemukan.' :
                            'Gagal memuat data.');
                    }
                });
            }

            $(document).on('click', '.transc-search-select', function() {
                window.selectTranscSearch(
                    $(this).data('field'),
                    $(this).data('value'),
                    $(this).data('label')
                );
            });

            $('.search-modal-trigger').on('click', function() {
                const field = $(this).data('field');
                const modalTitle = $(this).data('title') || 'List Data';
                loadSearchModal(field, modalTitle, false, false);
            });

            const detailFields = @json($detailFieldConfigs).sort((a, b) => Number(a.urut || 0) - Number(b.urut ||
                0));
            const initialRows = @json($detail_rows);
            const detailErrors = @json($detailErrors);
            const detailBody = $('#transc-detail-body');
            let rowIndex = 0;

            const escapeHtml = (value) => String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');

            const renderInput = (field, value, index) => {
                const name = `detail[${field.field}][]`;
                const baseClass = field.class ? ` ${field.class}` : '';
                const message = detailErrors?.[index]?.[field.field] || '';
                const errorClass = message ? ' border border-danger' : '';
                const errorHtml = message ?
                    `<p class="text-danger text-xs mt-1 mb-0">${escapeHtml(message)}</p>` : '';

                if (field.type === 'text') {
                    return `<div><textarea class="form-control${baseClass}${errorClass}" name="${name}" rows="1">${escapeHtml(value)}</textarea>${errorHtml}</div>`;
                }

                if (field.type === 'enum') {
                    const isCustomSelect = String(field.class || '').includes('custom-select');
                    const isSelectMultiple = String(field.class || '').includes('select-multiple');
                    const currentValues = isSelectMultiple ?
                        (Array.isArray(value) ? value.map((item) => String(item)) : (value ? [String(value)] :
                        [])) : [String(value ?? '')];
                    const options = (field.options || []).map((option) => {
                        const selected = currentValues.includes(String(option.value)) ? 'selected' : '';
                        return `<option value="${escapeHtml(option.value)}" ${selected}>${escapeHtml(option.label)}</option>`;
                    }).join('');
                    const refreshButton = (isCustomSelect || isSelectMultiple) ?
                        `<button type="button" class="btn btn-info btn-sm mb-0 px-2 py-1 enum-refresh-trigger enum-refresh-inside"
                            data-field="${field.field}" data-row-index="${index}" title="Refresh Data">
                            <i class="fas fa-rotate-right"></i>
                        </button>` : '';
                    return `
                        <div>
                            <div class="enum-refresh-wrapper">
                                <select class="form-select lazy-enum-select${baseClass}${errorClass}"
                                    name="${name}"
                                    data-field="${field.field}"
                                    data-row-index="${index}"
                                    data-selected='${escapeHtml(JSON.stringify(value ?? (isSelectMultiple ? [] : '')))}'
                                    ${isSelectMultiple ? 'multiple' : ''}>
                                    <option value=""></option>
                                    ${options}
                                </select>
                                ${refreshButton}
                            </div>
                            ${errorHtml}
                        </div>
                    `;
                }

                if (field.type === 'search') {
                    const label = value ?? '';

                    return `
                        <div>
                            <input type="hidden" name="${name}" value="${escapeHtml(value)}"
                                data-detail-search-hidden="${field.field}" data-row-index="${index}">
                            <div class="input-group">
                                <input type="text" class="form-control${baseClass}${errorClass}" value="${escapeHtml(label)}"
                                    data-detail-search-display="${field.field}" data-row-index="${index}" readonly>
                                <span class="input-group-text bg-primary text-light transc-detail-search-trigger"
                                    data-field="${field.field}" data-row-index="${index}" data-bs-toggle="modal"
                                    data-bs-target="#detailSearchModal${field.field}" style="cursor: pointer;">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                            ${errorHtml}
                        </div>
                    `;
                }

                if (field.type === 'date') {
                    return `<div><input type="date" class="form-control${baseClass}${errorClass}" name="${name}" value="${escapeHtml(value)}">${errorHtml}</div>`;
                }

                if (field.type === 'number' || field.type === 'currency') {
                    const step = field.decimals && Number(field.decimals) > 0 ? '0.' + '0'.repeat(Number(field
                        .decimals) - 1) + '1' : '1';
                    return `<div><input type="number" step="${step}" class="form-control${baseClass}${errorClass}" name="${name}" value="${escapeHtml(value)}">${errorHtml}</div>`;
                }

                return `<div><input type="text" class="form-control${baseClass}${errorClass}" name="${name}" maxlength="${field.length || ''}" value="${escapeHtml(value)}">${errorHtml}</div>`;
            };

            const addRow = (values = {}) => {
                const cells = detailFields.map((field) =>
                    `<td>${renderInput(field, values[field.field] ?? '', rowIndex)}</td>`).join('');
                const html = `
                    <tr data-row-index="${rowIndex}">
                        <td>
                            <button type="button" class="btn btn-danger btn-sm mb-0 transc-remove-row">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                        ${cells}
                    </tr>
                `;

                detailBody.append(html);
                initTranscSelectEnhancements(detailBody.find('tr').last());
                rowIndex += 1;
            };

            const initTranscSelectEnhancements = (scope = $(document)) => {
                scope.find('.select-multiple').attr('multiple', 'multiple');

                scope.find('.custom-select').each(function() {
                    const selectElement = $(this);
                    const currentValue = selectElement.val();

                    if (selectElement.hasClass('select2-hidden-accessible')) {
                        selectElement.select2('destroy');
                    }

                    selectElement.select2({
                        width: '100%'
                    });

                    if (currentValue !== null) {
                        selectElement.val(currentValue).trigger('change.select2');
                    }
                });
            };

            const applyEnumOptions = (selectElement, options) => {
                const selected = selectElement.val();
                const isMultiple = selectElement.prop('multiple');
                let optionHtml = '<option value=""></option>';

                (options || []).forEach((option) => {
                    optionHtml +=
                        `<option value="${escapeHtml(option.value)}">${escapeHtml(option.label)}</option>`;
                });

                selectElement.html(optionHtml);

                if (selected !== null) {
                    selectElement.val(selected);
                }

                if (selectElement.hasClass('custom-select')) {
                    initTranscSelectEnhancements(selectElement.parent());
                } else {
                    selectElement.trigger('change');
                }
            };

            const refreshEnumOptions = (selectElement) => {
                const fieldName = selectElement.data('field');

                if (!fieldName) {
                    return;
                }

                $.ajax({
                    url: `{{ url('/form-enum-options/' . $url_menu) }}`,
                    method: 'GET',
                    data: {
                        field: fieldName
                    },
                    success: function(response) {
                        applyEnumOptions(selectElement, response.options || []);
                    }
                });
            };

            if (initialRows.length > 0) {
                initialRows.forEach((row) => addRow(row));
            }

            initTranscSelectEnhancements();

            $('#transc-add-row').on('click', function() {
                addRow();
            });

            $(document).on('click', '.transc-remove-row', function() {
                $(this).closest('tr').remove();
            });

            $(document).on('click', '.transc-detail-search-trigger', function() {
                activeDetailSearchTarget = {
                    field: $(this).data('field'),
                    rowIndex: String($(this).data('row-index'))
                };
                loadSearchModal($(this).data('field'), $(this).data('field'), false, true);
            });

            $(document).on('click', '.transc-detail-search-select', function() {
                if (!activeDetailSearchTarget) {
                    return;
                }

                const field = activeDetailSearchTarget.field;
                const rowIndex = activeDetailSearchTarget.rowIndex;
                const value = $(this).data('value');
                const label = $(this).data('label');

                $(`[data-detail-search-hidden="${field}"][data-row-index="${rowIndex}"]`).val(value);
                $(`[data-detail-search-display="${field}"][data-row-index="${rowIndex}"]`).val(label);
                $(`#detailSearchModal${field}`).modal('hide');
            });

            $(document).on('click', '.enum-refresh-trigger', function() {
                const wrapper = $(this).closest('.enum-refresh-wrapper');
                const selectElement = wrapper.find('.lazy-enum-select').first();

                if (!selectElement.length) {
                    return;
                }

                refreshEnumOptions(selectElement);
            });

            $(document).on('click', '.search-modal-refresh', function() {
                const field = $(this).data('field');
                const isDetail = String($(this).data('detail')) === '1';
                const modalTitle = isDetail ?
                    field :
                    ($(`.search-modal-trigger[data-field="${field}"]`).data('title') || 'List Data');
                loadSearchModal(field, modalTitle, true, isDetail);
            });
        });
    </script>
@endpush