@extends('layouts.app')

@section('title', 'Talepler Arşiv')

@section('content')
    <div class="container-fluid py-3 talepler-archive-page">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
            <div>
                <h1 class="h4 mb-1">Tamamlanan Talepler Arşivi</h1>
                <div class="text-muted small">Arşive alınmış talepleri görüntüleyin ve yönetin.</div>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.talepler.board') }}" class="btn btn-sm btn-outline-primary">Görev Yönetimine Dön</a>
            </div>
        </div>

        <div id="taleplerArchiveMessageArea">
            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif
        </div>

        <div id="taleplerArchiveContent">
        <div class="card border-0 shadow-sm rounded-4 mb-3">
            <div class="card-body p-3">
                <form method="get" action="{{ route('admin.talepler.archive') }}" class="row g-2 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label small text-muted fw-semibold 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-3">
                        <label class="form-label small text-muted fw-semibold mb-1">Kategori</label>
                        <select name="category_id" class="form-select form-select-sm">
                            <option value="">Tüm Kategoriler</option>
                            @foreach ($categories as $category)
                                <option value="{{ (int) $category->id }}" {{ (int) $selectedCategoryId === (int) $category->id ? 'selected' : '' }}>{{ $category->category_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small text-muted fw-semibold mb-1">Arama</label>
                        <input type="text" name="q" value="{{ $search }}" class="form-control form-control-sm" placeholder="No, başlık, açıklama...">
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-sm btn-primary w-100">Uygula</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Talep No</th>
                                <th>Baslik</th>
                                <th>Birim / Kategori</th>
                                <th>Durum</th>
                                <th>Arşiv Tarihi</th>
                                <th>Arşivleyen</th>
                                <th class="text-end">Islemler</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($requests as $row)
                                <tr>
                                    <td class="fw-semibold">{{ $row->request_key }}</td>
                                    <td>
                                        <div class="fw-semibold">{{ $row->title }}</div>
                                        <div class="text-muted small">{{ \Illuminate\Support\Str::limit((string) ($row->description ?? ''), 90) }}</div>
                                    </td>
                                    <td>
                                        <div>{{ $row->unit_name }}</div>
                                        <div class="text-muted small">{{ $row->category_name }}</div>
                                    </td>
                                    <td><span class="badge text-bg-light border">{{ $row->status_label }}</span></td>
                                    <td>{{ !empty($row->archived_at) ? \Carbon\Carbon::parse($row->archived_at)->format('d.m.Y H:i') : '-' }}</td>
                                    <td>{{ $row->archiver_name ?: '-' }}</td>
                                    <td class="text-end">
                                        <div class="d-inline-flex gap-2">
                                            <a href="{{ route('admin.talepler.tasks.show', ['id' => (int) $row->id]) }}" class="btn btn-sm btn-outline-primary">Detay</a>
                                            @if (!empty($row->can_restore))
                                                <form method="post" action="{{ route('admin.talepler.tasks.restore', ['id' => (int) $row->id]) }}">
                                                    @csrf
                                                    <input type="hidden" name="return_to" value="archive">
                                                    <button type="submit" class="btn btn-sm btn-outline-secondary">
                                                        <i class="bi bi-arrow-counterclockwise me-1"></i>Geri Al
                                                    </button>
                                                </form>
                                            @endif
                                            @if (!empty($row->can_delete))
                                                <form method="post" action="{{ route('admin.talepler.tasks.delete', ['id' => (int) $row->id]) }}">
                                                    @csrf
                                                    <input type="hidden" name="return_to" value="archive">
                                                    <button type="submit" class="btn btn-sm btn-outline-danger js-talepler-confirm-btn"
                                                        data-confirm-title="Talep Sil"
                                                        data-confirm-message="Bu talep kalıcı olarak silinsin mi?"
                                                        data-confirm-confirm-text="Evet, Sil">
                                                        <i class="bi bi-trash me-1"></i>Sil
                                                    </button>
                                                </form>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">Arşivde talep bulunmuyor.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .talepler-archive-page {
            --pd-green: #145a46;
            --pd-green-dark: #0f4536;
            --pd-green-light: #e6f2ed;
            --pd-green-mid: #b9d9cc;
        }
        .talepler-archive-page .btn-primary {
            background: var(--pd-green);
            border-color: var(--pd-green);
        }
        .talepler-archive-page .btn-primary:hover,
        .talepler-archive-page .btn-primary:focus {
            background: var(--pd-green-dark);
            border-color: var(--pd-green-dark);
        }
        .talepler-archive-page .btn-outline-primary {
            color: var(--pd-green);
            border-color: var(--pd-green-mid);
        }
        .talepler-archive-page .btn-outline-primary:hover,
        .talepler-archive-page .btn-outline-primary:focus {
            color: var(--pd-green-dark);
            border-color: var(--pd-green);
            background: var(--pd-green-light);
        }
        .talepler-archive-page .btn-outline-secondary {
            border-color: var(--pd-green-mid);
            color: var(--pd-green);
        }
        .talepler-archive-page .btn-outline-secondary:hover,
        .talepler-archive-page .btn-outline-secondary:focus {
            border-color: var(--pd-green);
            color: var(--pd-green-dark);
            background: var(--pd-green-light);
        }
    </style>
@endpush

@push('scripts')
    <script>
        (() => {
            const initTaleplerArchivePage = () => {
                const messageArea = document.getElementById('taleplerArchiveMessageArea');
                const content = document.getElementById('taleplerArchiveContent');
                const filterForm = content?.querySelector('form[method="get"]');
                if (!messageArea || !content || !filterForm) {
                    return;
                }

                const showMessage = (type, message) => {
                    if (!message) {
                        messageArea.innerHTML = '';
                        return;
                    }
                    const className = type === 'success' ? 'alert-success' : 'alert-danger';
                    messageArea.innerHTML = `<div class="alert ${className}">${message}</div>`;
                };

                const buildUrl = () => {
                    const targetUrl = new URL(filterForm.action, window.location.origin);
                    targetUrl.search = new URLSearchParams(new FormData(filterForm)).toString();
                    return targetUrl.toString();
                };

                const replaceContent = (html, targetUrl, forcedMessage = '') => {
                    const nextDocument = new DOMParser().parseFromString(html, 'text/html');
                    const nextContent = nextDocument.getElementById('taleplerArchiveContent');
                    const nextMessageArea = nextDocument.getElementById('taleplerArchiveMessageArea');
                    if (!nextContent) {
                        throw new Error('Arsiv icerigi yenilenemedi.');
                    }

                    content.innerHTML = nextContent.innerHTML;
                    messageArea.innerHTML = nextMessageArea ? nextMessageArea.innerHTML : '';
                    if (forcedMessage) {
                        showMessage('success', forcedMessage);
                    }

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

                    initTaleplerArchivePage();
                };

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

                if (filterForm.dataset.ajaxBound !== '1') {
                    filterForm.dataset.ajaxBound = '1';
                    filterForm.addEventListener('submit', async (event) => {
                        event.preventDefault();
                        await loadArchiveContent(buildUrl());
                    });
                }

                content.querySelectorAll('form[method="post"]').forEach((actionForm) => {
                    if (!(actionForm instanceof HTMLFormElement) || actionForm.dataset.ajaxBound === '1') {
                        return;
                    }
                    actionForm.dataset.ajaxBound = '1';

                    actionForm.addEventListener('submit', async (event) => {
                        event.preventDefault();

                        const button = actionForm.querySelector('button[type="submit"]');
                        const requiresConfirm = button?.classList.contains('js-talepler-confirm-btn');
                        if (requiresConfirm) {
                            const title = button?.getAttribute('data-confirm-title') || 'Emin misiniz?';
                            const text = button?.getAttribute('data-confirm-message') || 'Bu islemi yapmak istediginize emin misiniz?';
                            const confirmText = button?.getAttribute('data-confirm-confirm-text') || 'Evet';
                            const cancelText = button?.getAttribute('data-confirm-cancel-text') || 'Vazgec';
                            const icon = button?.getAttribute('data-confirm-icon') || 'warning';

                            if (window.Swal && typeof window.Swal.fire === 'function') {
                                const result = await window.Swal.fire({
                                    title,
                                    text,
                                    icon,
                                    width: '26rem',
                                    padding: '1rem 1rem 0.9rem',
                                    showCancelButton: true,
                                    confirmButtonText: confirmText,
                                    cancelButtonText: cancelText,
                                    confirmButtonColor: '#145a46',
                                    cancelButtonColor: '#6c757d',
                                    reverseButtons: true,
                                    focusCancel: true,
                                });
                                if (!result.isConfirmed) {
                                    return;
                                }
                            } else if (!window.confirm(text)) {
                                return;
                            }
                        }

                        const response = await fetch(actionForm.action, {
                            method: 'POST',
                            headers: {
                                Accept: 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                            },
                            body: new FormData(actionForm),
                            credentials: 'same-origin',
                        });
                        const payload = await response.json().catch(() => null);
                        if (!response.ok || !payload || payload.ok !== true) {
                            showMessage('error', String(payload?.message || 'Islem tamamlanamadi.'));
                            return;
                        }

                        showMessage('success', String(payload.message || 'Islem tamamlandi.'));
                        await loadArchiveContent(buildUrl());
                    });
                });
            };

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