@extends('layouts.app')

@section('title', 'Talep Açma Yetki Matrisi')

@section('content')
    <div class="container-fluid py-3 talepler-access-page">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
            <div>
                <h1 class="h4 mb-1">Talep Açma Yetki Matrisi</h1>
                <div class="text-muted small">Hangi birim veya kullanıcının hangi birim ve kategoriye talep açabileceğini yönetin.</div>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.talepler.settings.catalog') }}" class="btn btn-sm btn-outline-secondary">Birim/Kategori Ayarları</a>
                <a href="{{ route('admin.talepler.board') }}" class="btn btn-sm btn-primary">Görev Yönetimine Dön</a>
            </div>
        </div>

        <div id="taleplerAccessAlerts">
            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>

        @if (!$ready || !$rulesReady)
            <div class="alert alert-warning">Talep açma yetki matrisi için gerekli tablolar hazır değil.</div>
        @else
            <div class="row g-3">
                <div class="col-12 col-xl-4">
                    <div class="card border-0 shadow-sm rounded-4">
                        <div class="card-header bg-white fw-bold">Yeni Yetki Kuralı</div>
                        <div class="card-body">
                            <form method="post" action="{{ route('admin.talepler.settings.access.store') }}" class="row g-3" id="taleplerAccessForm" data-access-async="create">
                                @csrf
                                <div class="col-12">
                                    <label class="form-label small text-muted fw-semibold mb-1">Kaynak Tipi</label>
                                    <select name="source_type" id="sourceTypeSelect" class="form-select form-select-sm" required>
                                        <option value="unit" {{ old('source_type', 'unit') === 'unit' ? 'selected' : '' }}>Birim</option>
                                        <option value="user" {{ old('source_type') === 'user' ? 'selected' : '' }}>Kullanıcı</option>
                                    </select>
                                </div>
                                <div class="col-12" id="sourceUnitWrap">
                                    <label class="form-label small text-muted fw-semibold mb-1">Kaynak Birim</label>
                                    <select name="source_unit_id" class="form-select form-select-sm">
                                        <option value="0" {{ (string) old('source_unit_id', '0') === '0' ? 'selected' : '' }}>Tümü</option>
                                        @foreach ($units as $unit)
                                            <option value="{{ (int) $unit->id }}" {{ (int) old('source_unit_id') === (int) $unit->id ? 'selected' : '' }}>
                                                {{ $unit->unit_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 d-none" id="sourceUserWrap">
                                    <label class="form-label small text-muted fw-semibold mb-1">Kaynak Kullanıcı</label>
                                    <select name="source_user_id" class="form-select form-select-sm">
                                        <option value="">Seçin</option>
                                        @foreach ($users as $user)
                                            <option value="{{ (int) $user->id }}" {{ (int) old('source_user_id') === (int) $user->id ? 'selected' : '' }}>
                                                {{ $user->name }}{{ !empty($user->department_name) ? ' (' . $user->department_name . ')' : '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label small text-muted fw-semibold mb-1">Hedef Birim</label>
                                    <select name="target_unit_id" id="targetUnitSelect" class="form-select form-select-sm" data-categories-endpoint="{{ route('admin.talepler.settings.access.categories') }}" required onchange="window.__taleplerAccessLoadCategories?.(true)">
                                        <option value="0" {{ (string) old('target_unit_id', '0') === '0' ? 'selected' : '' }}>Tümü</option>
                                        @foreach ($units as $unit)
                                            <option value="{{ (int) $unit->id }}" {{ (int) old('target_unit_id') === (int) $unit->id ? 'selected' : '' }}>
                                                {{ $unit->unit_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12">
                                    <label class="form-label small text-muted fw-semibold mb-1">Hedef Kategori</label>
                                    <select name="target_category_id" id="targetCategorySelect" class="form-select form-select-sm" data-old="{{ old('target_category_id') }}" onfocus="window.__taleplerAccessLoadCategories?.(false)">
                                        <option value="">Tüm Kategoriler</option>
                                    </select>
                                    <div class="form-text" id="targetCategoryHelp">Boş bırakırsanız seçilen hedef kapsamındaki tüm kategoriler için kural geçerli olur.</div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label small text-muted fw-semibold mb-1">Etki</label>
                                    <select name="effect" class="form-select form-select-sm" required>
                                        <option value="allow" {{ old('effect', 'allow') === 'allow' ? 'selected' : '' }}>İzin Ver</option>
                                        <option value="deny" {{ old('effect') === 'deny' ? 'selected' : '' }}>Engelle</option>
                                    </select>
                                </div>
                                <div class="col-md-6 d-flex align-items-end">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="is_active" value="1" {{ old('is_active', '1') ? 'checked' : '' }}>
                                        <label class="form-check-label">Aktif</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label small text-muted fw-semibold mb-1">Not</label>
                                    <textarea name="note" class="form-control form-control-sm" rows="3" maxlength="500" placeholder="Opsiyonel açıklama">{{ old('note') }}</textarea>
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="btn btn-sm btn-primary w-100">Yetki Kuralını Kaydet</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-xl-8">
                    <div class="card border-0 shadow-sm rounded-4">
                        <div class="card-header bg-white fw-bold d-flex justify-content-between align-items-center">
                            <span>Aktif Yetki Kuralları</span>
                            <span class="badge text-bg-light border" data-access-rules-count>{{ $rules->count() }}</span>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-sm align-middle mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Kaynak</th>
                                            <th>Hedef</th>
                                            <th>Etki</th>
                                            <th>Durum</th>
                                            <th>Not</th>
                                            <th class="text-end">İşlem</th>
                                        </tr>
                                    </thead>
                                    <tbody data-access-rules-body>
                                        @forelse ($rules as $rule)
                                            @php
                                                $sourceLabel = strtolower((string) ($rule->source_type ?? 'unit')) === 'user'
                                                    ? 'Kullanıcı: ' . ($rule->source_user_name ?: '#' . (int) ($rule->source_user_id ?? 0))
                                                    : 'Birim: ' . ((int) ($rule->source_unit_id ?? 0) === 0 ? 'Tümü' : ($rule->source_unit_name ?: '#' . (int) ($rule->source_unit_id ?? 0)));
                                                $targetUnitLabel = (int) ($rule->target_unit_id ?? 0) === 0
                                                    ? 'Tüm Birimler'
                                                    : ($rule->target_unit_name ?: '#' . (int) ($rule->target_unit_id ?? 0));
                                                $targetCategoryLabel = $rule->target_category_name ?: 'Tüm Kategoriler';
                                                $targetLabel = $targetUnitLabel . ' / ' . $targetCategoryLabel;
                                                $isDeny = strtolower((string) ($rule->effect ?? 'allow')) === 'deny';
                                                $effectLabel = $isDeny ? 'Engelle' : 'İzin Ver';
                                                $effectClass = $isDeny ? 'text-bg-danger' : 'text-bg-success';
                                                $isActive = !empty($rule->is_active);
                                                $statusLabel = $isActive ? 'Aktif' : 'Pasif';
                                                $statusClass = $isActive ? 'text-bg-primary' : 'text-bg-secondary';
                                            @endphp
                                            <tr data-access-rule-id="{{ (int) $rule->id }}">
                                                <td>{{ $sourceLabel }}</td>
                                                <td>{{ $targetLabel }}</td>
                                                <td>
                                                    <form method="post" action="{{ route('admin.talepler.settings.access.update', ['id' => (int) $rule->id]) }}" class="d-inline" data-access-async="update">
                                                        @csrf
                                                        <input type="hidden" name="effect" value="{{ $isDeny ? 'allow' : 'deny' }}">
                                                        <button type="submit" class="badge border-0 talepler-access-toggle {{ $effectClass }}" title="Etkiyi değiştir">
                                                            {{ $effectLabel }}
                                                        </button>
                                                    </form>
                                                </td>
                                                <td>
                                                    <form method="post" action="{{ route('admin.talepler.settings.access.update', ['id' => (int) $rule->id]) }}" class="d-inline" data-access-async="update">
                                                        @csrf
                                                        <input type="hidden" name="is_active" value="{{ $isActive ? '0' : '1' }}">
                                                        <button type="submit" class="badge border-0 talepler-access-toggle {{ $statusClass }}" title="Durumu değiştir">
                                                            {{ $statusLabel }}
                                                        </button>
                                                    </form>
                                                </td>
                                                <td class="small text-muted">{{ $rule->note ?: '-' }}</td>
                                                <td class="text-end">
                                                    <form method="post" action="{{ route('admin.talepler.settings.access.delete', ['id' => (int) $rule->id]) }}" data-access-async="delete">
                                                        @csrf
                                                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Bu yetki kuralı silinsin mi?');">
                                                            Sil
                                                        </button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr data-access-empty-row>
                                                <td colspan="6" class="text-center text-muted py-4">Tanımlı yetki kuralı yok. Kural tanımlanmayan hedeflerde mevcut birim bazlı açma davranışı devam eder.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@push('styles')
    <style>
        .talepler-access-page .btn-primary {
            background: #145a46;
            border-color: #145a46;
        }

        .talepler-access-page .btn-primary:hover,
        .talepler-access-page .btn-primary:focus {
            background: #0f4536;
            border-color: #0f4536;
        }

        .talepler-access-toggle {
            cursor: pointer;
            font-size: 0.8rem;
            line-height: 1;
            padding: 0.45rem 0.7rem;
        }
    </style>
@endpush

@push('scripts')
    <script>
        (() => {
            const categories = @json(
                collect($categories)->map(
                    fn ($row) => ['id' => (int) $row->id, 'unit_id' => (int) $row->unit_id, 'name' => (string) $row->category_name]
                )->values(),
                JSON_UNESCAPED_UNICODE
            );
            const categoriesEndpoint = @json(route('admin.talepler.settings.access.categories'));

            const initAccessCategoryHydration = () => {
                const page = document.querySelector('.talepler-access-page');
                const targetUnitSelect = document.getElementById('targetUnitSelect');
                const targetCategorySelect = document.getElementById('targetCategorySelect');
                const targetCategoryHelp = document.getElementById('targetCategoryHelp');

                if (
                    !(page instanceof HTMLElement)
                    || !(targetUnitSelect instanceof HTMLSelectElement)
                    || !(targetCategorySelect instanceof HTMLSelectElement)
                ) {
                    return;
                }

                if (page.dataset.accessCategoryHydrationBound === '1') {
                    return;
                }
                page.dataset.accessCategoryHydrationBound = '1';

                const renderCategories = () => {
                    const selectedUnitId = Number(targetUnitSelect.value || 0);
                    const selectedValue = String(targetCategorySelect.dataset.old || targetCategorySelect.value || '').trim();
                    const targetCategorySelectLocal = document.getElementById('targetCategorySelect');
                    const targetCategoryHelpLocal = document.getElementById('targetCategoryHelp');
                    if (!targetCategorySelectLocal) return;

                    targetCategorySelectLocal.innerHTML = '<option value="">Tüm Kategoriler</option>';

                    if (selectedUnitId <= 0) {
                        targetCategorySelectLocal.disabled = true;
                        targetCategorySelectLocal.dataset.old = '';
                        if (targetCategoryHelpLocal) {
                            targetCategoryHelpLocal.textContent = 'Tüm birimler seçildiğinde kategori kırılımı uygulanmaz.';
                        }
                        return;
                    }

                    categories
                        .filter((item) => Number(item.unit_id || 0) === selectedUnitId)
                        .forEach((item) => {
                            const option = document.createElement('option');
                            option.value = String(item.id || '');
                            option.textContent = String(item.name || '-');
                            if (selectedValue !== '' && option.value === selectedValue) {
                                option.selected = true;
                            }
                            targetCategorySelectLocal.appendChild(option);
                        });

                    targetCategorySelectLocal.disabled = false;
                    targetCategorySelectLocal.dataset.old = '';
                    if (targetCategoryHelpLocal) {
                        targetCategoryHelpLocal.textContent = 'Boş bırakırsanız seçilen hedef kapsamındaki tüm kategoriler için kural geçerli olur.';
                    }
                };

                const fetchAndRenderCategories = async (selectedUnitId) => {
                    if (selectedUnitId <= 0) {
                        return;
                    }

                    const selectedValue = String(targetCategorySelect.dataset.old || targetCategorySelect.value || '').trim();
                    const url = new URL(categoriesEndpoint, window.location.origin);
                    url.searchParams.set('unit_id', String(selectedUnitId));

                    const response = await fetch(url.toString(), {
                        headers: {
                            Accept: 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        cache: 'no-store',
                        credentials: 'same-origin',
                    });

                    if (!response.ok) {
                        return;
                    }

                    const payload = await response.json().catch(() => ({}));
                    const rows = Array.isArray(payload?.categories) ? payload.categories : [];

                    const targetCategorySelectLocal = document.getElementById('targetCategorySelect');
                    if (!targetCategorySelectLocal) return;
                    
                    targetCategorySelectLocal.innerHTML = '<option value="">Tüm Kategoriler</option>';
                    rows.forEach((item) => {
                        const option = document.createElement('option');
                        option.value = String(item?.id || '');
                        option.textContent = String(item?.name || item?.category_name || '-');
                        if (selectedValue !== '' && option.value === selectedValue) {
                            option.selected = true;
                        }
                        targetCategorySelectLocal.appendChild(option);
                    });

                    targetCategorySelectLocal.disabled = false;
                    targetCategorySelectLocal.dataset.old = '';
                };

                const hydrateCategories = async (force = false) => {
                    const targetUnitSelectLocal = document.getElementById('targetUnitSelect');
                    const targetCategorySelectLocal = document.getElementById('targetCategorySelect');
                    if (!targetUnitSelectLocal || !targetCategorySelectLocal) return;
                    
                    const selectedUnitId = Number(targetUnitSelectLocal.value || 0);
                    if (selectedUnitId <= 0) {
                        renderCategories();
                        return;
                    }

                    if (force || targetCategorySelectLocal.disabled || targetCategorySelectLocal.querySelectorAll('option').length <= 1) {
                        renderCategories();
                        try {
                            await fetchAndRenderCategories(selectedUnitId);
                        } catch (error) {
                            // Local payload remains as fallback.
                        }
                    }
                };

                if (!document._isTaleplerAccessEventsBound) {
                    document._isTaleplerAccessEventsBound = true;
                    
                    document.addEventListener('change', (e) => {
                        const t = e.target;
                        if (t && t.id === 'targetUnitSelect') hydrateCategories(true);
                    });
                    
                    document.addEventListener('input', (e) => {
                        const t = e.target;
                        if (t && t.id === 'targetUnitSelect') hydrateCategories(true);
                    });

                    ['click', 'focus', 'blur', 'mousedown'].forEach(evt => {
                        document.addEventListener(evt, (e) => {
                            const t = e.target;
                            if (t && (t.id === 'targetUnitSelect' || t.id === 'targetCategorySelect')) {
                                hydrateCategories(false);
                            }
                        });
                    });
                }

                window.__taleplerAccessLoadCategories = (force = false) => hydrateCategories(Boolean(force));

                hydrateCategories(true);
                requestAnimationFrame(() => hydrateCategories(false));
                window.setTimeout(() => hydrateCategories(false), 80);
                window.setTimeout(() => hydrateCategories(false), 220);
                window.setTimeout(() => hydrateCategories(false), 500);
            };

            window.AdminApp = window.AdminApp || {};
            window.AdminApp.registerPageInitializer?.('talepler-access-category-hydration', initAccessCategoryHydration);
            initAccessCategoryHydration();
        })();
    </script>
@endpush

@push('styles')
    <style>
        .talepler-access-loading {
            opacity: 0.65;
            pointer-events: none;
        }
    </style>
@endpush

@push('scripts')
    <script>
        (() => {
            const page = document.querySelector('.talepler-access-page');
            const accessForm = document.getElementById('taleplerAccessForm');
            const alertsHost = document.getElementById('taleplerAccessAlerts');
            const rulesBody = page?.querySelector('[data-access-rules-body]');
            const rulesCount = page?.querySelector('[data-access-rules-count]');
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
            const updateUrlTemplate = @json(route('admin.talepler.settings.access.update', ['id' => '__ID__']));
            const deleteUrlTemplate = @json(route('admin.talepler.settings.access.delete', ['id' => '__ID__']));

            if (!(page instanceof HTMLElement) || !(alertsHost instanceof HTMLElement)) {
                return;
            }

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

            const buildRuleUrl = (template, id) => String(template || '').replace('__ID__', String(id || ''));

            const renderAlert = (message, type = 'success', errors = []) => {
                const safeType = type === 'danger' ? 'danger' : 'success';
                const items = Array.isArray(errors) ? errors.filter(Boolean) : [];
                const detailHtml = items.length > 0
                    ? `<ul class="mb-0">${items.map((item) => `<li>${escapeHtml(item)}</li>`).join('')}</ul>`
                    : escapeHtml(message || '');

                alertsHost.innerHTML = `<div class="alert alert-${safeType}">${detailHtml}</div>`;
            };

            const clearAlert = () => {
                alertsHost.innerHTML = '';
            };

            const renderEmptyState = () => (
                '<tr data-access-empty-row><td colspan="6" class="text-center text-muted py-4">'
                + 'Tanimli yetki kurali yok. Kural tanimlanmayan hedeflerde mevcut birim bazli acma davranisi devam eder.'
                + '</td></tr>'
            );

            const renderRuleRow = (rule) => {
                if (!rule || !rule.id) {
                    return '';
                }

                return `
                    <tr data-access-rule-id="${Number(rule.id)}">
                        <td>${escapeHtml(rule.source_label)}</td>
                        <td>${escapeHtml(rule.target_label)}</td>
                        <td>
                            <form method="post" action="${escapeHtml(buildRuleUrl(updateUrlTemplate, rule.id))}" class="d-inline" data-access-async="update">
                                <input type="hidden" name="_token" value="${escapeHtml(csrfToken)}">
                                <input type="hidden" name="effect" value="${escapeHtml(rule.next_effect)}">
                                <button type="submit" class="badge border-0 talepler-access-toggle ${escapeHtml(rule.effect_class)}" title="Etkiyi degistir">
                                    ${escapeHtml(rule.effect_label)}
                                </button>
                            </form>
                        </td>
                        <td>
                            <form method="post" action="${escapeHtml(buildRuleUrl(updateUrlTemplate, rule.id))}" class="d-inline" data-access-async="update">
                                <input type="hidden" name="_token" value="${escapeHtml(csrfToken)}">
                                <input type="hidden" name="is_active" value="${escapeHtml(rule.next_is_active)}">
                                <button type="submit" class="badge border-0 talepler-access-toggle ${escapeHtml(rule.status_class)}" title="Durumu degistir">
                                    ${escapeHtml(rule.status_label)}
                                </button>
                            </form>
                        </td>
                        <td class="small text-muted">${escapeHtml(rule.note || '-')}</td>
                        <td class="text-end">
                            <form method="post" action="${escapeHtml(buildRuleUrl(deleteUrlTemplate, rule.id))}" data-access-async="delete">
                                <input type="hidden" name="_token" value="${escapeHtml(csrfToken)}">
                                <button type="submit" class="btn btn-sm btn-outline-danger">
                                    Sil
                                </button>
                            </form>
                        </td>
                    </tr>
                `;
            };

            const syncRulesCount = () => {
                if (!(rulesBody instanceof HTMLElement) || !(rulesCount instanceof HTMLElement)) {
                    return;
                }

                rulesCount.textContent = String(rulesBody.querySelectorAll('[data-access-rule-id]').length);
            };

            const ensureEmptyState = () => {
                if (!(rulesBody instanceof HTMLElement)) {
                    return;
                }

                const hasRows = rulesBody.querySelector('[data-access-rule-id]') instanceof HTMLElement;
                const emptyRow = rulesBody.querySelector('[data-access-empty-row]');
                if (hasRows && emptyRow) {
                    emptyRow.remove();
                } else if (!hasRows && !emptyRow) {
                    rulesBody.innerHTML = renderEmptyState();
                }
            };

            const upsertRuleRow = (rule, options = {}) => {
                if (!(rulesBody instanceof HTMLElement) || !rule || !rule.id) {
                    return;
                }

                const existingRow = rulesBody.querySelector(`[data-access-rule-id="${Number(rule.id)}"]`);
                if (existingRow) {
                    existingRow.outerHTML = renderRuleRow(rule);
                } else {
                    rulesBody.querySelector('[data-access-empty-row]')?.remove();

                    if (options.prepend) {
                        rulesBody.insertAdjacentHTML('afterbegin', renderRuleRow(rule));
                    } else {
                        rulesBody.insertAdjacentHTML('beforeend', renderRuleRow(rule));
                    }
                }

                syncRulesCount();
                ensureEmptyState();
            };

            const removeRuleRow = (ruleId) => {
                if (!(rulesBody instanceof HTMLElement)) {
                    return;
                }

                rulesBody.querySelector(`[data-access-rule-id="${Number(ruleId)}"]`)?.remove();
                syncRulesCount();
                ensureEmptyState();
            };

            const normalizeErrors = (payload) => {
                if (!payload || typeof payload !== 'object') {
                    return [];
                }

                if (payload.errors && typeof payload.errors === 'object') {
                    return Object.values(payload.errors)
                        .flatMap((items) => Array.isArray(items) ? items : [items])
                        .map((item) => String(item || '').trim())
                        .filter(Boolean);
                }

                return payload.message ? [String(payload.message)] : [];
            };

            const toggleLoading = (form, isLoading) => {
                if (!(form instanceof HTMLFormElement)) {
                    return;
                }

                form.classList.toggle('talepler-access-loading', isLoading);
                Array.from(form.elements).forEach((element) => {
                    if (
                        element instanceof HTMLButtonElement
                        || element instanceof HTMLInputElement
                        || element instanceof HTMLSelectElement
                        || element instanceof HTMLTextAreaElement
                    ) {
                        element.disabled = isLoading;
                    }
                });
            };

            const resetAccessForm = () => {
                if (!(accessForm instanceof HTMLFormElement)) {
                    return;
                }

                accessForm.reset();
                const sourceTypeSelect = document.getElementById('sourceTypeSelect');
                if (sourceTypeSelect instanceof HTMLSelectElement) {
                    sourceTypeSelect.value = 'unit';
                    sourceTypeSelect.dispatchEvent(new Event('change', { bubbles: true }));
                }

                const effectSelect = accessForm.querySelector('select[name="effect"]');
                if (effectSelect instanceof HTMLSelectElement) {
                    effectSelect.value = 'allow';
                }

                const activeCheckbox = accessForm.querySelector('input[name="is_active"]');
                if (activeCheckbox instanceof HTMLInputElement) {
                    activeCheckbox.checked = true;
                }

                const targetUnitSelect = document.getElementById('targetUnitSelect');
                if (targetUnitSelect instanceof HTMLSelectElement) {
                    targetUnitSelect.value = '0';
                    targetUnitSelect.dispatchEvent(new Event('change', { bubbles: true }));
                }
            };

            const submitAsyncForm = async (form) => {
                if (!(form instanceof HTMLFormElement)) {
                    return;
                }

                const formData = new FormData(form);
                toggleLoading(form, true);

                try {
                    clearAlert();

                    const response = await fetch(form.action, {
                        method: 'POST',
                        credentials: 'same-origin',
                        headers: {
                            Accept: 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': csrfToken,
                        },
                        body: formData,
                    });

                    const payload = await response.json().catch(() => ({}));
                    if (!response.ok || !payload?.ok) {
                        throw payload;
                    }

                    if (form.dataset.accessAsync === 'create') {
                        if (payload.rule) {
                            upsertRuleRow(payload.rule, { prepend: Boolean(payload.created) });
                        }
                        resetAccessForm();
                    } else if (form.dataset.accessAsync === 'update') {
                        if (payload.rule) {
                            upsertRuleRow(payload.rule);
                        }
                    } else if (form.dataset.accessAsync === 'delete') {
                        removeRuleRow(payload.deleted_id);
                    }

                    renderAlert(payload.message || 'Islem tamamlandi.', 'success');
                } catch (payload) {
                    const errors = normalizeErrors(payload);
                    renderAlert(errors[0] || 'Islem tamamlanamadi.', 'danger', errors);
                } finally {
                    toggleLoading(form, false);
                }
            };

            page.addEventListener('submit', (event) => {
                const form = event.target.closest('form[data-access-async]');
                if (!(form instanceof HTMLFormElement)) {
                    return;
                }

                event.preventDefault();
                submitAsyncForm(form);
            });

            syncRulesCount();
            ensureEmptyState();
        })();
    </script>
@endpush

@push('scripts')
    <script>
        (() => {
            const sourceTypeSelect = document.getElementById('sourceTypeSelect');
            const sourceUnitWrap = document.getElementById('sourceUnitWrap');
            const sourceUserWrap = document.getElementById('sourceUserWrap');

            const toggleSourceType = () => {
                const sourceType = String(sourceTypeSelect?.value || 'unit');
                sourceUnitWrap?.classList.toggle('d-none', sourceType !== 'unit');
                sourceUserWrap?.classList.toggle('d-none', sourceType !== 'user');
            };

            const fillCategories = () => {
                if (!targetCategorySelect) {
                    return;
                }

                const selectedUnitId = Number(targetUnitSelect?.value || 0);
                const selectedOld = String(targetCategorySelect.dataset.old || '');
                targetCategorySelect.innerHTML = '<option value="">Tüm Kategoriler</option>';

                if (selectedUnitId <= 0) {
                    targetCategorySelect.value = '';
                    targetCategorySelect.disabled = true;
                    if (targetCategoryHelp) {
                        targetCategoryHelp.textContent = 'Tüm birimler seçildiğinde kategori kırılımı uygulanmaz.';
                    }
                    targetCategorySelect.dataset.old = '';
                    return;
                }

                categories
                    .filter((item) => Number(item.unit_id || 0) === selectedUnitId)
                    .forEach((item) => {
                        const option = document.createElement('option');
                        option.value = String(item.id || '');
                        option.textContent = String(item.name || '-');
                        if (selectedOld !== '' && option.value === selectedOld) {
                            option.selected = true;
                        }
                        targetCategorySelect.appendChild(option);
                    });

                targetCategorySelect.disabled = false;
                if (targetCategoryHelp) {
                    targetCategoryHelp.textContent = 'Boş bırakırsanız seçilen hedef kapsamındaki tüm kategoriler için kural geçerli olur.';
                }
                targetCategorySelect.dataset.old = '';
            };

            document.addEventListener('change', (e) => {
                if (e.target && e.target.id === 'sourceTypeSelect') {
                    toggleSourceType();
                }
            });

            toggleSourceType();
        })();
    </script>
@endpush