@extends('layouts.app')

@section('title', 'Talepler Alt Aşama Ayarları')

@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
            <div>
                <h1 class="h4 mb-1">Alt Aşama Ayarları</h1>
                <div class="text-muted small">Birim ve kategori seçip alt aşamaları tek ekrandan yönetin.</div>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.talepler.settings.catalog') }}" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-diagram-2 me-1"></i>Birim/Kategori Yönetimi
                </a>
                <a href="{{ route('admin.talepler.board', ['unit_id' => (int) $selectedUnitId, 'category_id' => (int) $selectedCategoryId]) }}"
                    class="btn btn-primary btn-sm">
                    <i class="bi bi-kanban me-1"></i>Görev Yönetimine Dön
                </a>
            </div>
        </div>

        <div id="stageSettingsMessageArea">
        @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>

        <div id="stageSettingsPageContent">
        @if (!$ready)
            <div class="alert alert-warning">Alt aşama ayarları için gerekli tablolar hazır değil.</div>
        @else
            <div class="card border-0 shadow-sm rounded-4 mb-3">
                <div class="card-body">
                    <form id="stageFilterForm" method="get" action="{{ route('admin.talepler.settings.stages') }}" class="row g-2 align-items-end">
                        <div class="col-md-4">
                            <label class="form-label text-muted small fw-bold mb-1">Birim</label>
                            <select name="unit_id" class="form-select form-select-sm">
                                <option value="">Tüm Birimler</option>
                                @foreach ($units as $unit)
                                    <option value="{{ (int) $unit->id }}" {{ (int) $selectedUnitId === (int) $unit->id ? 'selected' : '' }}>
                                        {{ $unit->unit_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label text-muted small fw-bold mb-1">Kategori</label>
                            <select name="category_id" class="form-select form-select-sm">
                                <option value="">Kategori Secin</option>
                                @foreach ($categories as $category)
                                    <option value="{{ (int) $category->id }}" data-unit-id="{{ (int) $category->unit_id }}" {{ (int) $selectedCategoryId === (int) $category->id ? 'selected' : '' }}>
                                        {{ $category->category_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                </div>
            </div>

            @if ((int) $selectedCategoryId <= 0)
                <div class="alert alert-info mb-3">
                    Alt asama duzenlemek icin birim ve kategori secin.
                </div>
            @else
                @php
                    $coreStageKeys = ['todo', 'in_progress', 'done'];
                    $stageGroups = [
                        'todo' => [
                            'label' => 'Yapilacaklar',
                            'items' => ($editableWorkflowStages ?? collect())
                                ->where('lane_group', 'todo')
                                ->filter(fn($stage) => !in_array(trim((string) ($stage->stage_key ?? '')), $coreStageKeys, true))
                                ->values(),
                        ],
                        'doing' => [
                            'label' => 'Islemdekiler',
                            'items' => ($editableWorkflowStages ?? collect())
                                ->where('lane_group', 'doing')
                                ->filter(fn($stage) => !in_array(trim((string) ($stage->stage_key ?? '')), $coreStageKeys, true))
                                ->values(),
                        ],
                        'done' => [
                            'label' => 'Tamamlananlar',
                            'items' => ($editableWorkflowStages ?? collect())
                                ->where('lane_group', 'done')
                                ->filter(fn($stage) => !in_array(trim((string) ($stage->stage_key ?? '')), $coreStageKeys, true))
                                ->values(),
                        ],
                    ];
                @endphp

                <form method="post" action="{{ route('admin.talepler.settings.stages.save') }}"
                    class="row g-2 align-items-end mb-3 bg-white p-3 rounded-4 border">
                    @csrf
                    <input type="hidden" name="return_to" value="settings_stages">
                    <input type="hidden" name="template_id" value="{{ (int) ($activeWorkflowTemplate->id ?? 0) }}">
                    <input type="hidden" name="category_id" value="{{ (int) $selectedCategoryId }}">
                    <input type="hidden" name="unit_id" value="{{ (int) $selectedUnitId }}">

                    <div class="col-md-3">
                        <label class="form-label text-muted small fw-bold mb-1">Ana Aşama</label>
                        <select name="lane_group" class="form-select form-select-sm" required>
                            @foreach (($laneGroups ?? []) as $laneKey => $laneLabel)
                                <option value="{{ $laneKey }}">{{ $laneLabel }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-7">
                        <label class="form-label text-muted small fw-bold mb-1">Alt Aşama Adı</label>
                        <input type="text" name="stage_name" class="form-control form-control-sm" required>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-success btn-sm w-100">
                            <i class="bi bi-plus me-1"></i>Ekle
                        </button>
                    </div>
                </form>

                <div class="row g-3">
                    @foreach ($stageGroups as $laneKey => $group)
                        <div class="col-12 col-lg-4">
                            <div class="card border-0 shadow-sm rounded-4 h-100">
                                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                                    <strong>{{ $group['label'] }}</strong>
                                    <span class="badge text-bg-light border">{{ $group['items']->count() }}</span>
                                </div>
                                <div class="card-body">
                                    @forelse ($group['items'] as $stage)
                                        <div class="d-flex gap-2 align-items-start mb-2 pb-2 border-bottom">
                                            <form method="post" action="{{ route('admin.talepler.settings.stages.save') }}"
                                                class="d-flex gap-2 flex-grow-1">
                                                @csrf
                                                <input type="hidden" name="return_to" value="settings_stages">
                                                <input type="hidden" name="stage_id" value="{{ (int) $stage->id }}">
                                                <input type="hidden" name="template_id" value="{{ (int) ($activeWorkflowTemplate->id ?? 0) }}">
                                                <input type="hidden" name="category_id" value="{{ (int) $selectedCategoryId }}">
                                                <input type="hidden" name="unit_id" value="{{ (int) $selectedUnitId }}">
                                                <input type="hidden" name="lane_group" value="{{ $laneKey }}">

                                                <input type="text" name="stage_name" class="form-control form-control-sm"
                                                    value="{{ $stage->stage_name }}" required>
                                                <button type="submit" class="btn btn-sm btn-outline-primary">Guncelle</button>
                                            </form>

                                            <form method="post" action="{{ route('admin.talepler.settings.stages.delete', ['stageId' => (int) $stage->id]) }}"
                                                data-requires-confirm="Bu alt asama silinsin mi?">
                                                @csrf
                                                <input type="hidden" name="return_to" value="settings_stages">
                                                <input type="hidden" name="template_id" value="{{ (int) ($activeWorkflowTemplate->id ?? 0) }}">
                                                <input type="hidden" name="category_id" value="{{ (int) $selectedCategoryId }}">
                                                <input type="hidden" name="unit_id" value="{{ (int) $selectedUnitId }}">
                                                <button type="submit" class="btn btn-sm btn-outline-danger" title="Sil">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    @empty
                                        <div class="small text-muted">Bu grupta alt asama yok.</div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        @endif
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (() => {
            const initTaleplerStageSettingsPage = () => {
                const form = document.getElementById('stageFilterForm');
                const messageArea = document.getElementById('stageSettingsMessageArea');
                const pageContent = document.getElementById('stageSettingsPageContent');
                if (!form || !messageArea || !pageContent) {
                    return;
                }

                const buildTargetUrl = () => {
                    const currentForm = document.getElementById('stageFilterForm');
                    if (!currentForm) return window.location.href;
                    
                    const url = new URL(currentForm.action, window.location.origin);
                    url.search = new URLSearchParams(new FormData(currentForm)).toString();
                    return url.toString();
                };

                const showMessage = (type, message) => {
                    const currentMessageArea = document.getElementById('stageSettingsMessageArea');
                    if (!currentMessageArea) return;
                    
                    if (!message) {
                        currentMessageArea.innerHTML = '';
                        return;
                    }

                    const className = type === 'success' ? 'alert-success' : 'alert-danger';
                    currentMessageArea.innerHTML = `<div class="alert ${className}">${message}</div>`;
                };

                const applyCategoryFilter = () => {
                    const currentForm = document.getElementById('stageFilterForm');
                    if (!currentForm) return;
                    
                    const unitSelect = currentForm.querySelector('select[name="unit_id"]');
                    const categorySelect = currentForm.querySelector('select[name="category_id"]');
                    if (!unitSelect || !categorySelect) {
                        return;
                    }

                    const selectedUnitId = String(unitSelect.value || '').trim();
                    let selectedVisible = false;

                    Array.from(categorySelect.options).forEach((option, index) => {
                        if (index === 0 || String(option.value || '').trim() === '') {
                            option.hidden = false;
                            option.disabled = false;
                            return;
                        }

                        const optionUnitId = String(option.dataset.unitId || '').trim();
                        const visible = selectedUnitId === '' || optionUnitId === selectedUnitId;
                        option.hidden = !visible;
                        option.disabled = !visible;
                        if (option.selected && visible) {
                            selectedVisible = true;
                        }
                    });

                    if (!selectedVisible && String(categorySelect.value || '').trim() !== '') {
                        categorySelect.value = '';
                    }
                };

                const replacePageContent = (html, targetUrl, forcedMessage = '') => {
                    const nextDocument = new DOMParser().parseFromString(html, 'text/html');
                    const nextMessageArea = nextDocument.getElementById('stageSettingsMessageArea');
                    const nextPageContent = nextDocument.getElementById('stageSettingsPageContent');
                    
                    const currentPageContent = document.getElementById('stageSettingsPageContent');
                    const currentMessageArea = document.getElementById('stageSettingsMessageArea');
                    
                    if (!nextPageContent || !currentPageContent) {
                        throw new Error('Alt asama icerigi yenilenemedi.');
                    }

                    currentPageContent.innerHTML = nextPageContent.innerHTML;
                    if (currentMessageArea) {
                        currentMessageArea.innerHTML = nextMessageArea ? nextMessageArea.innerHTML : '';
                    }
                    if (forcedMessage) {
                        showMessage('success', forcedMessage);
                    }

                    if (targetUrl) {
                        window.history.replaceState({}, '', targetUrl);
                    }

                    initTaleplerStageSettingsPage();
                };

                const loadPage = async (targetUrl, options = {}) => {
                    const response = await fetch(targetUrl, {
                        headers: {
                            Accept: 'text/html,application/xhtml+xml',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        cache: 'no-store',
                        credentials: 'same-origin',
                        ...options,
                    });
                    const html = await response.text();
                    replacePageContent(html, targetUrl);
                };

                if (!document._isTaleplerStageSettingsEventsBound) {
                    document._isTaleplerStageSettingsEventsBound = true;

                    document.addEventListener('submit', async (e) => {
                        const target = e.target;
                        if (!target || !(target instanceof HTMLFormElement)) return;

                        if (target.id === 'stageFilterForm') {
                            e.preventDefault();
                            await loadPage(buildTargetUrl());
                        } else if (pageContent.contains(target) && target.method.toLowerCase() === 'post') {
                            e.preventDefault();
                            const confirmText = String(target.getAttribute('onsubmit') || '');
                            if (confirmText.includes('confirm') && !window.confirm('Bu alt asama silinsin mi?')) {
                                return;
                            }

                            const response = await fetch(target.action, {
                                method: 'POST',
                                body: new FormData(target),
                                headers: {
                                    Accept: 'text/html,application/xhtml+xml',
                                    'X-Requested-With': 'XMLHttpRequest',
                                },
                                cache: 'no-store',
                                credentials: 'same-origin',
                            });
                            const html = await response.text();
                            replacePageContent(html, buildTargetUrl());
                        }
                    });

                    document.addEventListener('change', (e) => {
                        const target = e.target;
                        if (!target || !(target instanceof HTMLSelectElement)) return;
                        
                        const stageFilterForm = document.getElementById('stageFilterForm');
                        if (!stageFilterForm || !stageFilterForm.contains(target)) return;

                        if (target.name === 'unit_id') {
                            applyCategoryFilter();
                            stageFilterForm.requestSubmit();
                        } else if (target.name === 'category_id') {
                            stageFilterForm.requestSubmit();
                        }
                    });
                }

                applyCategoryFilter();
            };

            window.AdminApp.registerPageInitializer?.('talepler-stage-settings-page', initTaleplerStageSettingsPage);
            initTaleplerStageSettingsPage();
        })();
    </script>
@endpush