@extends(config('lncshared.dropdown_admin.layout'))

@section('content')
    <div class="main-card">
        <div class="card-title">
            <div class="card-header-row">
                <h3>Edit {{ $filename }}.json</h3>
                <a href="{{ route(config('lncshared.dropdown_admin.routes.index')) }}" class="btn-secondary">
                    @if (view()->exists('components.ui.icon'))
                        <x-ui.icon name="chevron-left" size="14" />
                    @endif
                    Back to dropdown list
                </a>
            </div>
        </div>

        <div class="card-body">
            <div class="dropdown-admin-warning" role="alert">
                @if (view()->exists('components.ui.icon'))
                    <span class="dropdown-admin-warning-icon" aria-hidden="true">
                        <x-ui.icon name="alert" size="18" />
                    </span>
                @endif
                <div>
                    <strong>Be prudent.</strong>
                    Changes to dropdown values can break validation, filters, and existing records that store these codes.
                    Renaming or removing a code that is already used in the database may cause the application to malfunction.
                </div>
            </div>

            <details class="dropdown-admin-help">
                <summary>Column reference</summary>
                <div class="dropdown-admin-help-body">
                    <p class="form-help">
                        Each option is one JSON object. Keep <code>code</code> and <code>value</code> identical unless you have a legacy compatibility reason.
                        Hover column titles in the table below for a short summary.
                    </p>
                    <table class="data-table dropdown-admin-help-table">
                        <thead>
                            <tr>
                                <th>Column</th>
                                <th>Required</th>
                                <th>Role</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($columnHelp as $column => $help)
                                <tr>
                                    <td><code>{{ $column }}</code></td>
                                    <td>{{ in_array($column, ['code', 'value', 'name'], true) ? 'Yes' : 'No' }}</td>
                                    <td>{{ $help }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </details>

            <form
                method="POST"
                action="{{ route(config('lncshared.dropdown_admin.routes.update'), $filename) }}"
                class="dropdown-admin-form"
            >
                @csrf
                @method('PUT')

                <div class="table-scroll">
                    <table class="data-table dropdown-admin-table" data-dropdown-table>
                        <thead>
                            <tr>
                                @foreach ($columnHelp as $column => $help)
                                    <th title="{{ $help }}">{{ ucfirst($column) }}</th>
                                @endforeach
                                <th></th>
                            </tr>
                        </thead>
                        <tbody data-dropdown-rows>
                            @foreach ($items as $index => $item)
                                <tr data-dropdown-row>
                                    <td>
                                        <input
                                            type="text"
                                            name="items[{{ $index }}][code]"
                                            value="{{ old('items.'.$index.'.code', $item['code']) }}"
                                            required
                                            pattern="[A-Za-z0-9_]+"
                                            autocomplete="off"
                                        >
                                    </td>
                                    <td>
                                        <input
                                            type="text"
                                            name="items[{{ $index }}][value]"
                                            value="{{ old('items.'.$index.'.value', $item['value']) }}"
                                            required
                                            pattern="[A-Za-z0-9_]+"
                                            autocomplete="off"
                                        >
                                    </td>
                                    <td>
                                        <input
                                            type="text"
                                            name="items[{{ $index }}][name]"
                                            value="{{ old('items.'.$index.'.name', $item['name']) }}"
                                            required
                                            autocomplete="off"
                                        >
                                    </td>
                                    <td>
                                        <input
                                            type="text"
                                            name="items[{{ $index }}][label]"
                                            value="{{ old('items.'.$index.'.label', $item['label'] ?? '') }}"
                                            autocomplete="off"
                                            placeholder="Optional"
                                        >
                                    </td>
                                    <td>
                                        <input
                                            type="text"
                                            name="items[{{ $index }}][code2]"
                                            value="{{ old('items.'.$index.'.code2', $item['code2'] ?? '') }}"
                                            autocomplete="off"
                                            placeholder="Optional"
                                        >
                                    </td>
                                    <td class="dropdown-admin-actions">
                                        <button
                                            type="button"
                                            class="btn-secondary"
                                            data-dropdown-remove-row
                                            @disabled(count($items) <= 1)
                                        >
                                            Remove
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                @error('items')
                    <div class="form-error">{{ $message }}</div>
                @enderror

                <div class="dropdown-admin-form-actions">
                    <button type="button" class="btn-secondary" data-dropdown-add-row>
                        Add option
                    </button>
                    <button type="submit" class="btn-primary inline">
                        Save {{ $filename }}.json
                    </button>
                </div>
            </form>
        </div>
    </div>

    <template id="dropdown-row-template">
        <tr data-dropdown-row>
            <td>
                <input type="text" data-field="code" required pattern="[A-Za-z0-9_]+" autocomplete="off">
            </td>
            <td>
                <input type="text" data-field="value" required pattern="[A-Za-z0-9_]+" autocomplete="off">
            </td>
            <td>
                <input type="text" data-field="name" required autocomplete="off">
            </td>
            <td>
                <input type="text" data-field="label" autocomplete="off" placeholder="Optional">
            </td>
            <td>
                <input type="text" data-field="code2" autocomplete="off" placeholder="Optional">
            </td>
            <td class="dropdown-admin-actions">
                <button type="button" class="btn-secondary" data-dropdown-remove-row>Remove</button>
            </td>
        </tr>
    </template>

    <script>
        document.querySelectorAll('[data-dropdown-table]').forEach((table) => {
            const form = table.closest('form');
            const tbody = table.querySelector('[data-dropdown-rows]');
            const template = document.getElementById('dropdown-row-template');
            const addButton = form.querySelector('[data-dropdown-add-row]');

            const reindexRows = () => {
                tbody.querySelectorAll('[data-dropdown-row]').forEach((row, index) => {
                    row.querySelectorAll('[data-field], input[name]').forEach((input) => {
                        const field = input.dataset.field || input.name.match(/\]\[(\w+)\]$/)?.[1];
                        if (!field) {
                            return;
                        }

                        input.name = `items[${index}][${field}]`;
                    });

                    const removeButton = row.querySelector('[data-dropdown-remove-row]');
                    if (removeButton) {
                        removeButton.disabled = tbody.querySelectorAll('[data-dropdown-row]').length <= 1;
                    }
                });
            };

            addButton?.addEventListener('click', () => {
                const row = template.content.firstElementChild.cloneNode(true);
                tbody.appendChild(row);
                reindexRows();
                row.querySelector('input')?.focus();
            });

            tbody.addEventListener('click', (event) => {
                const button = event.target.closest('[data-dropdown-remove-row]');
                if (!button || button.disabled) {
                    return;
                }

                const row = button.closest('[data-dropdown-row]');
                if (!row || tbody.querySelectorAll('[data-dropdown-row]').length <= 1) {
                    return;
                }

                row.remove();
                reindexRows();
            });

            reindexRows();
        });
    </script>
@endsection