@foreach($data as $reprimand)
<x-modal name="editReprimand{{ $reprimand->id }}">
    <div class="p-6" x-data="reprimandEdit(
        '{{ $watcherNames[$reprimand->id]['id'] ?? '' }}',
        '{{ $watcherNames[$reprimand->id]['name'] ?? '' }}'
    )">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Edit Reprimand</h2>
        <form method="POST" action="{{ route('reprimands.update', $reprimand->id) }}" enctype="multipart/form-data" class="space-y-4">
            @csrf
            @method('PUT')

            {{-- Assign To --}}
            <div>
                <x-input-label :value="__('form.Employees')" />
                <div x-on:select-changed="fetchApprovalLine($event.detail.key)">
                    <x-select
                        name="assign_to"
                        id="assign_to_{{ $reprimand->id }}"
                        :options="$employees"
                        :value="$reprimand->assign_to"
                        :selected="$reprimand->assign_to"
                        placeholder="{{ __('form.Select-Employees') }}"
                        required />
                </div>
            </div>

            {{-- Reprimand Type --}}
            <div>
                <x-input-label value="Reprimand Type" />
                <x-select
                    name="reprimand_type_id"
                    id="reprimand_type_id_{{ $reprimand->id }}"
                    :options="$reprimandTypes"
                    :value="$reprimand->reprimand_type_id"
                    :selected="$reprimand->reprimand_type_id"
                    placeholder="Pilih Reprimand Type"
                    required />
            </div>

            {{-- Effective Date --}}
            <div>
                <x-input-label :value="__('form.Effective-Date')" />
                <x-text-input type="date" name="effective_date" class="mt-1 block w-full"
                    value="{{ $reprimand->effective_date }}" required />
            </div>

            {{-- End Date --}}
            <div>
                <x-input-label :value="__('form.End-Date')" />
                <x-text-input type="date" name="end_date" class="mt-1 block w-full"
                    value="{{ $reprimand->end_date }}" />
            </div>

            {{-- Notes --}}
            <div>
                <x-input-label :value="__('form.Notes')" />
                <textarea name="notes" rows="3"
                    class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">{{ $reprimand->notes }}</textarea>
            </div>

            {{-- Watchers --}}
            <div>
                <x-input-label value="Watchers" />
                <div class="mt-1 flex items-center gap-2">
                    <input type="hidden" name="watchers" x-model="watcherId">
                    <div class="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 rounded-md bg-gray-50 text-sm min-h-[38px]"
                        x-text="watcherName || 'Auto-filled dari Approval Line employee'">
                    </div>
                    <template x-if="loadingWatcher">
                        <svg class="w-5 h-5 animate-spin text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
                        </svg>
                    </template>
                </div>
                <p class="text-xs text-gray-400 mt-1">Otomatis terisi berdasarkan approval line employee yang dipilih</p>
            </div>

            {{-- Attachment --}}
            <div>
                <x-input-label :value="__('form.Attachment')" />
                @if($reprimand->attachment)
                <p class="text-xs text-gray-500 mb-1">File saat ini:
                    <a href="{{ asset('storage/' . $reprimand->attachment) }}" target="_blank" class="text-blue-500 underline">Lihat file</a>
                </p>
                @endif
                <input type="file" name="attachment" accept=".pdf,.jpg,.jpeg,.png"
                    class="mt-1 block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-600 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-600 file:text-white hover:file:bg-blue-700">
            </div>

            <div class="flex justify-end gap-2 pt-2">
                <button type="button" class="px-4 py-2 text-sm font-medium rounded-lg bg-gray-500 text-white hover:bg-gray-600"
                    @click="$dispatch('close-modal', 'editReprimand{{ $reprimand->id }}')">
                    {{ __('form.Cancel') }}
                </button>
                <button type="submit" class="px-4 py-2 text-sm text-white bg-blue-700 hover:bg-blue-800 rounded-lg">
                    {{ __('navbar.Save') }}
                </button>
            </div>
        </form>
    </div>
</x-modal>
@endforeach

<script>
    function reprimandEdit(initialWatcherId, initialWatcherName) {
        return {
            watcherId: initialWatcherId,
            watcherName: initialWatcherName,
            loadingWatcher: false,
            init() {
                this.$nextTick(() => {
                    const wrapper = this.$refs.assignToWrapper;
                    if (!wrapper) return;
                    const hiddenInput = wrapper.querySelector('input[type="hidden"]');
                    if (!hiddenInput) return;

                    let lastVal = hiddenInput.value ?? '';
                    setInterval(() => {
                        const cur = hiddenInput.value;
                        if (cur !== lastVal) {
                            lastVal = cur;
                            if (cur) this.fetchApprovalLine(cur);
                        }
                    }, 300);
                });
            },
            fetchApprovalLine(employeeId) {
                if (!employeeId) {
                    this.watcherId = '';
                    this.watcherName = '';
                    return;
                }
                this.loadingWatcher = true;
                fetch(`/reprimands/approval-line/${employeeId}`)
                    .then(r => r.json())
                    .then(data => {
                        this.watcherId = data.id ? String(data.id) : '';
                        this.watcherName = data.name ?? 'Tidak ada approval line';
                    })
                    .catch(() => {
                        this.watcherId = '';
                        this.watcherName = 'Gagal mengambil data';
                    })
                    .finally(() => this.loadingWatcher = false);
            }
        }
    }
</script>