@php
    $answerChoices = [
        'yes_strong' => 'Evet!',
        'yes' => 'Evet',
        'unknown' => '?',
        'no' => 'Hayır',
        'no_strong' => 'Hayır!',
    ];

    $answers = $answers ?? [];
    $lifeEventAnswers = $lifeEventAnswers ?? [];

    $lifeEventCategories = [];
    foreach ($lifeEvents as $eventRow) {
        $categoryKey = (string) ($eventRow['category'] ?? 'general');
        $categoryLabel = (string) ($eventRow['category_label'] ?? 'Genel');
        $lifeEventCategories[$categoryKey] = $categoryLabel;
    }

    $catalogById = collect($lifeEvents ?? [])->keyBy('id');

    $initialLifeRows = [];
    foreach ($lifeEventAnswers as $index => $value) {
        if (!is_array($value)) {
            continue;
        }

        $eventDate = trim((string) ($value['event_date'] ?? ''));
        $month = (int) ($value['month'] ?? 0);
        $year = (int) ($value['year'] ?? 0);
        $category = trim((string) ($value['event_category'] ?? ''));
        $detail = trim((string) ($value['event_detail'] ?? ''));

        if ($detail === '' && is_string($index) && $catalogById->has($index)) {
            $detail = (string) $index;
            if ($category === '') {
                $category = (string) ($catalogById->get($index)['category'] ?? '');
            }
        }

        if ($category === '' && $detail !== '' && $catalogById->has($detail)) {
            $category = (string) ($catalogById->get($detail)['category'] ?? '');
        }

        if ($eventDate === '' && $month > 0 && $year > 0) {
            $eventDate = sprintf('%04d-%02d-15', $year, $month);
        }

        if ($detail === '' && $eventDate === '' && $category === '') {
            continue;
        }

        if ($category !== '' && !isset($lifeEventCategories[$category])) {
            $category = '';
        }

        $initialLifeRows[] = [
            'event_category' => $category,
            'event_detail' => $detail,
            'event_date' => $eventDate,
        ];
    }

    if (count($initialLifeRows) === 0) {
        $initialLifeRows = [
            ['event_category' => '', 'event_detail' => '', 'event_date' => ''],
            ['event_category' => '', 'event_detail' => '', 'event_date' => ''],
        ];
    }

    $detailsByCategory = [];
    foreach ($lifeEvents as $eventRow) {
        $category = (string) ($eventRow['category'] ?? 'general');
        if (!isset($detailsByCategory[$category])) {
            $detailsByCategory[$category] = [];
        }
        $detailsByCategory[$category][] = [
            'id' => (string) ($eventRow['id'] ?? ''),
            'label' => (string) ($eventRow['label'] ?? ''),
        ];
    }
@endphp

<div class="rect-wizard-block">
    <div class="d-flex flex-column gap-1 mb-3">
        <h6 class="mb-0 fw-semibold">Soru Formu</h6>
        <small class="text-muted">Önce hayat olaylarını ekleyin, ardından soruları yanıtlayın.</small>
    </div>

    <h6 class="fw-semibold mb-2">Hayat Olayları</h6>
    <div class="border rounded-3 p-2 p-md-3 bg-light-subtle mb-3">
        <div class="d-flex justify-content-between align-items-center gap-2 mb-2 flex-wrap">
            <small class="text-muted">Olayları kendiniz ekleyebilir veya kaldırabilirsiniz.</small>
            <button type="button" id="wizardAddLifeEvent" class="btn btn-sm btn-outline-success">+ Olay Ekle</button>
        </div>

        <div id="wizardLifeEventsList" class="d-flex flex-column gap-2">
            @foreach ($initialLifeRows as $index => $row)
                <div class="row g-2 align-items-center rect-event-row" data-life-event-row>
                    <div class="col-12 col-md-4">
                        <select name="life_events[{{ $index }}][event_category]" class="form-select form-select-sm form-control-modern" data-life-field="event_category">
                            <option value="">Kategori seçin</option>
                            @foreach ($lifeEventCategories as $categoryValue => $categoryLabel)
                                <option value="{{ $categoryValue }}" @selected((string) old('life_events.' . $index . '.event_category', $row['event_category']) === $categoryValue)>{{ $categoryLabel }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-md-3">
                        <select name="life_events[{{ $index }}][event_detail]" class="form-select form-select-sm form-control-modern" data-life-field="event_detail">
                            <option value="">Detay seçin</option>
                            @foreach ($detailsByCategory[(string) ($row['event_category'] ?? '')] ?? [] as $detailOption)
                                <option value="{{ $detailOption['id'] }}" @selected((string) old('life_events.' . $index . '.event_detail', $row['event_detail']) === $detailOption['id'])>{{ $detailOption['label'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-md-3">
                        <input
                            type="date"
                            name="life_events[{{ $index }}][event_date]"
                            class="form-control form-control-sm form-control-modern"
                            data-life-field="event_date"
                            value="{{ old('life_events.' . $index . '.event_date', $row['event_date']) }}"
                        >
                    </div>
                    <div class="col-12 col-md-1 d-grid">
                        <button type="button" class="btn btn-sm btn-outline-danger" data-remove-life-event>Sil</button>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-sm align-middle rect-table-modern mb-3">
            <thead>
                <tr>
                    @foreach ($answerChoices as $choiceLabel)
                        <th class="text-center">{{ $choiceLabel }}</th>
                    @endforeach
                    <th>Soru</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($predispositions as $row)
                    @php
                        $savedAnswer = old('answers.' . $row['id'], $answers[$row['id']] ?? 'unknown');
                    @endphp
                    <tr>
                        @foreach ($answerChoices as $choiceValue => $choiceLabel)
                            <td class="text-center">
                                <input
                                    class="form-check-input"
                                    type="radio"
                                    name="answers[{{ $row['id'] }}]"
                                    value="{{ $choiceValue }}"
                                    @checked($savedAnswer === $choiceValue)
                                >
                            </td>
                        @endforeach
                        <td>{{ $row['label'] }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<template id="wizardLifeEventTemplate">
    <div class="row g-2 align-items-center rect-event-row" data-life-event-row>
        <div class="col-12 col-md-4">
            <select data-life-field="event_category" class="form-select form-select-sm form-control-modern">
                <option value="">Kategori seçin</option>
                @foreach ($lifeEventCategories as $categoryValue => $categoryLabel)
                    <option value="{{ $categoryValue }}">{{ $categoryLabel }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-12 col-md-3">
            <select data-life-field="event_detail" class="form-select form-select-sm form-control-modern">
                <option value="">Detay seçin</option>
            </select>
        </div>
        <div class="col-12 col-md-3">
            <input type="date" data-life-field="event_date" class="form-control form-control-sm form-control-modern">
        </div>
        <div class="col-12 col-md-1 d-grid">
            <button type="button" class="btn btn-sm btn-outline-danger" data-remove-life-event>Sil</button>
        </div>
    </div>
</template>

@once
    <script>
        (function () {
            const list = document.getElementById('wizardLifeEventsList');
            const addButton = document.getElementById('wizardAddLifeEvent');
            const template = document.getElementById('wizardLifeEventTemplate');
            const detailsByCategory = @json($detailsByCategory);

            if (!list || !addButton || !template) {
                return;
            }

            const maxRows = 25;

            const reindexRows = () => {
                const rows = list.querySelectorAll('[data-life-event-row]');
                rows.forEach((row, index) => {
                    row.querySelectorAll('[data-life-field]').forEach((field) => {
                        const key = field.getAttribute('data-life-field');
                        field.setAttribute('name', `life_events[${index}][${key}]`);
                    });
                });
            };

            const syncDetailOptions = (row) => {
                const categoryField = row.querySelector('[data-life-field="event_category"]');
                const detailField = row.querySelector('[data-life-field="event_detail"]');
                if (!categoryField || !detailField) {
                    return;
                }

                const selected = String(categoryField.value || '');
                const selectedBefore = String(detailField.value || '');
                const options = Array.isArray(detailsByCategory[selected]) ? detailsByCategory[selected] : [];

                detailField.innerHTML = '<option value="">Detay seçin</option>';
                options.forEach((item) => {
                    const option = document.createElement('option');
                    option.value = String(item.id || '');
                    option.textContent = String(item.label || '');
                    if (option.value === selectedBefore) {
                        option.selected = true;
                    }
                    detailField.appendChild(option);
                });
            };

            const addRow = () => {
                const count = list.querySelectorAll('[data-life-event-row]').length;
                if (count >= maxRows) {
                    return;
                }

                const fragment = template.content.cloneNode(true);
                list.appendChild(fragment);
                reindexRows();
                const rows = list.querySelectorAll('[data-life-event-row]');
                const lastRow = rows[rows.length - 1];
                if (lastRow) {
                    syncDetailOptions(lastRow);
                }
            };

            addButton.addEventListener('click', addRow);

            list.addEventListener('click', (event) => {
                const removeButton = event.target.closest('[data-remove-life-event]');
                if (!removeButton) {
                    return;
                }

                const rows = list.querySelectorAll('[data-life-event-row]');
                if (rows.length <= 1) {
                    return;
                }

                removeButton.closest('[data-life-event-row]')?.remove();
                reindexRows();
            });

            list.addEventListener('change', (event) => {
                const categoryField = event.target.closest('[data-life-field="event_category"]');
                if (!categoryField) {
                    return;
                }

                const row = categoryField.closest('[data-life-event-row]');
                if (!row) {
                    return;
                }

                const detailField = row.querySelector('[data-life-field="event_detail"]');
                if (detailField) {
                    detailField.value = '';
                }
                syncDetailOptions(row);
            });

            reindexRows();
            list.querySelectorAll('[data-life-event-row]').forEach((row) => {
                syncDetailOptions(row);
            });
        })();
    </script>
@endonce