@extends('layouts.app')

@section('title', 'Yeni Talep Oluştur')

@push('styles')
    <style>
        .talepler-create-shell {
            --pd-green: #145a46;
            --pd-green-dark: #0f4536;
            --pd-green-light: #e6f2ed;
            --pd-green-mid: #b9d9cc;
            max-width: 1080px;
            margin: 0 auto;
        }

        .talepler-create-card {
            border: 0;
            border-radius: 16px;
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
        }

        .talepler-create-hero {
            border-radius: 16px;
            background: linear-gradient(135deg, var(--pd-green-dark) 0%, var(--pd-green) 55%, #1f7a5f 100%);
            color: #fff;
        }

        .talepler-create-hero .btn-outline-light {
            border-color: rgba(255, 255, 255, 0.45);
        }

        .talepler-form-section {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 1rem;
            background: #fff;
        }

        .talepler-form-label {
            font-size: 0.85rem;
            font-weight: 600;
            color: #334155;
            margin-bottom: 0.35rem;
        }

        .talepler-dropzone {
            border: 2px dashed #cbd5e1;
            border-radius: 12px;
            background: #f8fafc;
            padding: 1.35rem;
            text-align: center;
            cursor: pointer;
        }

        .talepler-dropzone:hover {
            border-color: var(--pd-green);
            background: #f2faf6;
        }

        .talepler-create-shell .btn-primary {
            background: var(--pd-green);
            border-color: var(--pd-green);
        }

        .talepler-create-shell .btn-primary:hover,
        .talepler-create-shell .btn-primary:focus {
            background: var(--pd-green-dark);
            border-color: var(--pd-green-dark);
        }

        .talepler-create-shell .text-primary {
            color: var(--pd-green) !important;
        }

        .talepler-create-shell .form-control:focus,
        .talepler-create-shell .form-select:focus {
            border-color: var(--pd-green-mid);
            box-shadow: 0 0 0 0.2rem rgba(20, 90, 70, 0.15);
        }
    </style>
@endpush

@section('content')
    <div class="container py-4">
        <div class="talepler-create-shell">
            <div class="talepler-create-hero p-4 mb-4">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                    <div>
                        <h1 class="h3 mb-1">Talep Açma Merkezi</h1>
                        <p class="mb-0 opacity-75 small">Talebinizi ilgili birime yönlendirin, aşamalı olarak takip edin.</p>
                    </div>
                    <div class="d-flex gap-2">
                        @if (!empty($canOperateBoard))
                            <a href="{{ route('admin.talepler.board') }}" class="btn btn-sm btn-outline-light rounded-pill px-3">
                                <i class="bi bi-kanban me-1"></i>Görev Yönetimi
                            </a>
                        @endif
                        <a href="{{ route('admin.talepler.opened') }}" class="btn btn-sm btn-outline-light rounded-pill px-3">
                            <i class="bi bi-send-check me-1"></i>Açtığım Talepler
                        </a>
                    </div>
                </div>
            </div>

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

            @if (!$ready)
                <div class="alert alert-warning border-0 shadow-sm">Talepler görev tabloları hazır değil. Veritabanı geçişlerini çalıştırın.</div>
            @else
                <div class="card talepler-create-card">
                    <div class="card-body p-4 p-lg-5">
                        <form method="post" action="{{ route('admin.talepler.tasks.store') }}" id="taleplerCreateForm" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="priority" value="{{ old('priority', 'medium') }}">

                            <div class="talepler-form-section mb-3">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="talepler-form-label">İlgili Birim <span class="text-danger">*</span></label>
                                        <select name="unit_id" id="createUnit" class="form-select" required>
                                            <option value="">-- Birim Seçiniz --</option>
                                            @foreach ($units as $unit)
                                                <option value="{{ (int) $unit->id }}"
                                                    {{ (int) old('unit_id') === (int) $unit->id ? 'selected' : '' }}>
                                                    {{ $unit->unit_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <div class="form-text">Sadece talep açma durumu aktif olan birimlere talep oluşturulabilir.</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="talepler-form-label">Kategori / Alt Süreç <span class="text-danger">*</span></label>
                                        <select name="category_id" id="createCategory" class="form-select" data-old="{{ old('category_id') }}" required>
                                            <option value="">Önce birim seçin</option>
                                        </select>
                                    </div>
                                    <div class="col-md-12">
                                        <label class="talepler-form-label">Talep Başlığı <span class="text-danger">*</span></label>
                                        <input type="text" name="title" class="form-control" value="{{ old('title') }}" placeholder="Kısa ve net bir başlık yazın..." required>
                                    </div>
                                </div>
                            </div>

                            <div class="talepler-form-section mb-3" id="marketingContextSection" style="display:none;">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <h6 class="mb-0">Pazarlama Destek Bağlamı</h6>
                                    <span class="text-muted small">Bu alanda kaynak/lokasyon seçimi zorunludur.</span>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="talepler-form-label">Kaynak / Lokasyon</label>
                                        <select name="support_context_key" id="supportContextSelect" class="form-select">
                                            <option value="">-- Seçiniz --</option>
                                            @foreach (($supportContextOptions ?? []) as $contextKey => $contextLabel)
                                                <option value="{{ $contextKey }}" {{ old('support_context_key') === $contextKey ? 'selected' : '' }}>{{ $contextLabel }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="talepler-form-section mb-3 d-none" id="dynamicFieldSection">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <h6 class="mb-0">Ek Bilgiler</h6>
                                </div>
                                <div class="row g-3" id="dynamicFieldGrid"></div>
                            </div>

                            <div class="talepler-form-section mb-3">
                                <label class="talepler-form-label">Detaylı Açıklama</label>
                                <textarea name="description" class="form-control" rows="6"
                                    placeholder="Talebin kapsamını, beklenen çıktısını ve kritik notları açıklayın...">{{ old('description') }}</textarea>
                            </div>

                            <div class="talepler-form-section mb-4">
                                <label class="talepler-form-label d-block mb-2">Dosya Ekleri</label>
                                <div class="talepler-dropzone position-relative" onclick="document.getElementById('fileInput').click()">
                                    <i class="bi bi-cloud-arrow-up fs-2 text-primary"></i>
                                    <div class="fw-semibold mt-2">Dosyaları sürükleyin veya seçmek için tıklayın</div>
                                    <div class="small text-muted">PDF, Office, resim, zip (Maks. 20MB / dosya)</div>
                                    <input type="file" name="attachments[]" id="fileInput" class="d-none" multiple onchange="updateFileList(this)">
                                </div>
                                <div id="fileList" class="mt-3"></div>
                            </div>

                            <div class="d-flex align-items-center justify-content-between">
                                <div class="text-muted small">
                                    Talep, seçilen birimin görev listesine düşecektir.
                                </div>
                                <button type="submit" class="btn btn-primary rounded-pill px-4">
                                    Talebi Oluştur <i class="bi bi-arrow-right ms-1"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function updateFileList(input) {
            const fileList = document.getElementById('fileList');
            fileList.innerHTML = '';
            if (!input.files || input.files.length === 0) {
                return;
            }

            let html = '<div class="d-flex flex-wrap gap-2">';
            Array.from(input.files).forEach((file) => {
                html += `<span class="badge bg-light text-dark border p-2"><i class="bi bi-paperclip me-1"></i>${file.name}</span>`;
            });
            html += '</div>';
            fileList.innerHTML = html;
        }

        (() => {
            const categoriesByUnit = @json(($categoriesByUnit ?? collect())->map(
                fn ($rows) => collect($rows)->map(
                    fn ($row) => ['id' => (int) $row->id, 'name' => (string) $row->category_name, 'key' => (string) ($row->category_key ?? '')]
                )->values()
            ));
            const categoriesEndpoint = @json(route('admin.talepler.tasks.categories'));
            const categoryFieldsEndpoint = @json(route('admin.talepler.tasks.category-fields'));
            const oldCustomFieldValues = @json((array) old('custom_fields', []));

            const initTaleplerCreateForm = () => {
                const form = document.getElementById('taleplerCreateForm');
                const unitSelect = document.getElementById('createUnit');
                const categorySelect = document.getElementById('createCategory');
                const marketingSection = document.getElementById('marketingContextSection');
                const supportContextSelect = document.getElementById('supportContextSelect');
                const dynamicFieldSection = document.getElementById('dynamicFieldSection');
                const dynamicFieldGrid = document.getElementById('dynamicFieldGrid');

                if (!form || !unitSelect || !categorySelect || form.dataset.categoryInitBound === '1') {
                    return;
                }

                form.dataset.categoryInitBound = '1';
                let activeRequestController = null;
                let latestRequestToken = 0;
                let activeFieldRequestController = null;
                let latestFieldRequestToken = 0;
                let lastSyncedUnitId = '';

                const readSelectedUnitId = () => {
                    const directValue = String(unitSelect.value || '').trim();
                    if (directValue !== '') {
                        return directValue;
                    }

                    const selectedOption = unitSelect.options[unitSelect.selectedIndex];
                    return String(selectedOption?.value || '').trim();
                };

                const readSelectedCategoryValue = () => {
                    const oldValue = String(categorySelect.dataset.old || '').trim();
                    if (oldValue !== '') {
                        return oldValue;
                    }

                    const directValue = String(categorySelect.value || '').trim();
                    if (directValue !== '') {
                        return directValue;
                    }

                    const selectedOption = categorySelect.options[categorySelect.selectedIndex];
                    return String(selectedOption?.value || '').trim();
                };

                const resolveCategoriesForUnit = (unitId) => {
                    const normalized = String(unitId || '').trim();
                    if (normalized === '') {
                        return [];
                    }

                    return categoriesByUnit[normalized]
                        || categoriesByUnit[String(Number(normalized))]
                        || categoriesByUnit[Number(normalized)]
                        || [];
                };

                const rememberCategories = (unitId, items) => {
                    const normalized = String(unitId || '').trim();
                    if (normalized === '') {
                        return [];
                    }

                    categoriesByUnit[normalized] = items;
                    const numericKey = String(Number(normalized));
                    if (numericKey !== 'NaN' && numericKey !== '') {
                        categoriesByUnit[numericKey] = items;
                    }
                };

                const fillCategories = (items, selectedValue = '', emptyLabel = '-- Alt Kategori Seçin --') => {
                    const normalizedItems = Array.isArray(items) ? items : [];
                    categorySelect.innerHTML = '';

                    const emptyOption = document.createElement('option');
                    emptyOption.value = '';
                    emptyOption.textContent = emptyLabel;
                    categorySelect.appendChild(emptyOption);

                    normalizedItems.forEach((item) => {
                        const option = document.createElement('option');
                        option.value = String(item.id || '');
                        option.dataset.categoryKey = String(item.key || '');
                        option.textContent = String(item.name || '-');
                        if (selectedValue !== '' && option.value === String(selectedValue)) {
                            option.selected = true;
                        }
                        categorySelect.appendChild(option);
                    });
                };

                const setCategoryLoadingState = (isLoading, placeholder = 'Kategoriler yukleniyor...') => {
                    categorySelect.disabled = Boolean(isLoading);
                    if (isLoading) {
                        fillCategories([], '', placeholder);
                    }
                };

                const toggleMarketingContext = () => {
                    if (!marketingSection) {
                        return;
                    }

                    const selectedOption = categorySelect.options[categorySelect.selectedIndex];
                    const categoryKey = String(selectedOption?.dataset?.categoryKey || '').toLowerCase();
                    const isDestek = categoryKey === 'destek';
                    marketingSection.style.display = isDestek ? '' : 'none';
                    if (supportContextSelect) {
                        supportContextSelect.required = isDestek;
                        supportContextSelect.disabled = !isDestek;
                        if (!isDestek) {
                            supportContextSelect.value = '';
                        }
                    }
                };

                const renderDynamicFields = (fields) => {
                    if (!dynamicFieldSection || !dynamicFieldGrid) {
                        return;
                    }

                    dynamicFieldGrid.innerHTML = '';
                    const normalizedFields = Array.isArray(fields) ? fields : [];
                    dynamicFieldSection.classList.toggle('d-none', normalizedFields.length === 0);
                    if (normalizedFields.length === 0) {
                        return;
                    }

                    normalizedFields.forEach((field) => {
                        const key = String(field?.key || '').trim();
                        if (key === '') {
                            return;
                        }
                        const fieldType = String(field?.type || 'select').trim() || 'select';

                        const wrapper = document.createElement('div');
                        wrapper.className = fieldType === 'textarea' ? 'col-12' : 'col-md-6';

                        const label = document.createElement('label');
                        label.className = 'talepler-form-label';
                        label.textContent = String(field?.label || key);
                        if (field?.required) {
                            const requiredMark = document.createElement('span');
                            requiredMark.className = 'text-danger';
                            requiredMark.textContent = ' *';
                            label.appendChild(requiredMark);
                        }

                        const selectedValue = String(oldCustomFieldValues[key] || '').trim();
                        wrapper.appendChild(label);

                        let inputEl = null;
                        if (fieldType === 'textarea') {
                            const textarea = document.createElement('textarea');
                            textarea.className = 'form-control';
                            textarea.name = `custom_fields[${key}]`;
                            textarea.rows = 4;
                            textarea.required = Boolean(field?.required);
                            textarea.value = selectedValue;
                            inputEl = textarea;
                        } else if (fieldType === 'text' || fieldType === 'number' || fieldType === 'date') {
                            const input = document.createElement('input');
                            input.className = 'form-control';
                            input.name = `custom_fields[${key}]`;
                            input.type = fieldType === 'text' ? 'text' : fieldType;
                            input.required = Boolean(field?.required);
                            input.value = selectedValue;
                            inputEl = input;
                        } else {
                            const select = document.createElement('select');
                            select.className = 'form-select';
                            select.name = `custom_fields[${key}]`;
                            select.required = Boolean(field?.required);

                            const emptyOption = document.createElement('option');
                            emptyOption.value = '';
                            emptyOption.textContent = '-- Seçiniz --';
                            select.appendChild(emptyOption);

                            (Array.isArray(field?.options) ? field.options : []).forEach((optionRow) => {
                                const option = document.createElement('option');
                                option.value = String(optionRow?.value || '');
                                option.textContent = String(optionRow?.label || option.value || '-');
                                if (selectedValue !== '' && option.value === selectedValue) {
                                    option.selected = true;
                                }
                                select.appendChild(option);
                            });

                            inputEl = select;
                        }

                        if (inputEl) {
                            wrapper.appendChild(inputEl);
                        }
                        dynamicFieldGrid.appendChild(wrapper);
                    });
                };

                const loadCategoryFields = async (categoryId) => {
                    const normalizedCategoryId = String(categoryId || '').trim();
                    if (normalizedCategoryId === '') {
                        renderDynamicFields([]);
                        return;
                    }

                    if (activeFieldRequestController) {
                        activeFieldRequestController.abort();
                    }

                    const requestToken = ++latestFieldRequestToken;
                    const controller = new AbortController();
                    activeFieldRequestController = controller;

                    try {
                        const url = new URL(categoryFieldsEndpoint, window.location.origin);
                        url.searchParams.set('category_id', normalizedCategoryId);

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

                        if (!response.ok) {
                            renderDynamicFields([]);
                            return;
                        }

                        const payload = await response.json();
                        if (requestToken !== latestFieldRequestToken) {
                            return;
                        }

                        renderDynamicFields(Array.isArray(payload?.fields) ? payload.fields : []);
                    } catch (error) {
                        if (error?.name !== 'AbortError') {
                            renderDynamicFields([]);
                        }
                    } finally {
                        if (activeFieldRequestController === controller) {
                            activeFieldRequestController = null;
                        }
                    }
                };

                const loadCategories = async (unitId, selectedValue = '') => {
                    const normalizedUnitId = String(unitId || '').trim();
                    if (normalizedUnitId === '') {
                        if (activeRequestController) {
                            activeRequestController.abort();
                            activeRequestController = null;
                        }
                        fillCategories([], '', 'Önce birim seçin');
                        categorySelect.disabled = false;
                        toggleMarketingContext();
                        return [];
                    }

                    const fallbackItems = resolveCategoriesForUnit(normalizedUnitId);
                    if (fallbackItems.length === 0) {
                        setCategoryLoadingState(true);
                    } else {
                        fillCategories(fallbackItems, selectedValue);
                        categorySelect.disabled = false;
                    }
                    toggleMarketingContext();

                    if (activeRequestController) {
                        activeRequestController.abort();
                    }

                    const requestToken = ++latestRequestToken;
                    const controller = new AbortController();
                    activeRequestController = controller;

                    try {
                        const url = new URL(categoriesEndpoint, window.location.origin);
                        url.searchParams.set('unit_id', normalizedUnitId);

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

                        if (!response.ok) {
                            return fallbackItems;
                        }

                        const payload = await response.json();
                        if (requestToken !== latestRequestToken) {
                            return fallbackItems;
                        }

                        const items = Array.isArray(payload?.categories) ? payload.categories : [];
                        rememberCategories(normalizedUnitId, items);
                        fillCategories(items, selectedValue);
                        categorySelect.disabled = false;
                        return items;
                    } catch (error) {
                        if (error?.name !== 'AbortError' && fallbackItems.length === 0) {
                            fillCategories([], selectedValue);
                        }
                        categorySelect.disabled = false;
                        return fallbackItems;
                    } finally {
                        if (activeRequestController === controller) {
                            activeRequestController = null;
                        }
                        toggleMarketingContext();
                    }
                };

                const refresh = async () => {
                    const selectedUnitId = readSelectedUnitId();
                    const selectedValue = readSelectedCategoryValue();
                    lastSyncedUnitId = selectedUnitId;
                    await loadCategories(selectedUnitId, selectedValue);
                    categorySelect.dataset.old = '';
                    loadCategoryFields(String(categorySelect.value || '').trim());
                };

                const ensureCategoriesLoaded = async () => {
                    const selectedUnitId = readSelectedUnitId();
                    if (selectedUnitId === '') {
                        return;
                    }

                    const optionCount = categorySelect.querySelectorAll('option').length;
                    const firstOptionText = '';
                    if (optionCount > 1 && !firstOptionText.includes('önce birim')) {
                        return;
                    }

                    const selectedValue = String(categorySelect.dataset.old || categorySelect.value || '').trim();
                    await loadCategories(selectedUnitId, selectedValue);
                };

                const syncRestoredUnitState = () => {
                    const selectedUnitId = String(unitSelect.value || '').trim();
                    const optionCount = categorySelect.querySelectorAll('option').length;
                    if (selectedUnitId === '' || optionCount > 1) {
                        return;
                    }

                    const selectedValue = String(categorySelect.dataset.old || categorySelect.value || '').trim();
                    loadCategories(selectedUnitId, selectedValue);
                };

                const currentDocumentEvents = window._taleplerIndexEvents || {};
                
                if (!currentDocumentEvents.bound) {
                    window._taleplerIndexEvents = { bound: true };
                    
                    document.addEventListener('change', (e) => {
                        const target = e.target;
                        if (!target) return;
                        
                        if (target.id === 'createUnit') {
                            refresh();
                        } else if (target.id === 'createCategory') {
                            toggleMarketingContext();
                            const categorySelect = document.getElementById('createCategory');
                            if (categorySelect) loadCategoryFields(categorySelect.value);
                        }
                    });

                    document.addEventListener('input', (e) => {
                        if (e.target && e.target.id === 'createUnit') {
                            refresh();
                        }
                    });

                    document.addEventListener('focus', (e) => {
                         if (!e.target) return;
                         if (e.target.id === 'createCategory') ensureCategoriesLoaded();
                         if (e.target.id === 'createUnit') syncRestoredUnitState();
                    }, true);

                    document.addEventListener('mousedown', (e) => {
                         if (e.target && e.target.id === 'createCategory') ensureCategoriesLoaded();
                    });

                    document.addEventListener('touchstart', (e) => {
                         if (e.target && e.target.id === 'createCategory') ensureCategoriesLoaded();
                    }, { passive: true });

                    document.addEventListener('click', (e) => {
                         if (!e.target) return;
                         if (e.target.id === 'createUnit' || e.target.id === 'createCategory') {
                             hydrateCreateFormCategories();
                         }
                    });
                }

                refresh();
                requestAnimationFrame(refresh);
                requestAnimationFrame(syncRestoredUnitState);
                window.setTimeout(syncRestoredUnitState, 60);
                window.setTimeout(syncRestoredUnitState, 180);
                window.setTimeout(syncRestoredUnitState, 400);

                const hydrateCreateFormCategories = async () => {
                    const selectedUnitId = readSelectedUnitId();
                    if (selectedUnitId === '') {
                        return;
                    }

                    const categorySelect = document.getElementById('createCategory');
                    const optionCount = categorySelect ? categorySelect.querySelectorAll('option').length : 0;
                    const selectedValue = readSelectedCategoryValue();

                    if (selectedUnitId !== lastSyncedUnitId) {
                        lastSyncedUnitId = selectedUnitId;
                        await loadCategories(selectedUnitId, selectedValue);
                        return;
                    }

                    if (optionCount <= 1) {
                        await loadCategories(selectedUnitId, selectedValue);
                    }
                };

                let createFormHydrationAttempts = 0;
                const createFormHydrationTimer = window.setInterval(() => {
                    createFormHydrationAttempts += 1;
                    hydrateCreateFormCategories();
                    if (createFormHydrationAttempts >= 20) {
                        window.clearInterval(createFormHydrationTimer);
                    }
                }, 150);

            };

            window.AdminApp = window.AdminApp || {};
            window.AdminApp.registerPageInitializer?.('talepler-create-form', initTaleplerCreateForm);
            initTaleplerCreateForm();
        })();
    </script>
@endpush