@extends('admin.panel.layout')

@section('admin_title', 'Anfragen')

@section('admin_content')
    <div class="admin-header">
        <div>
            <span class="shop-muted-label">Kontaktformular</span>
            <h1>Anfragen</h1>
            <p class="shop-copy" style="margin-top: 14px;">Alle eingegangenen Nachrichten über das Kontaktformular, neueste zuerst.</p>
        </div>
        <div class="admin-toolbar">
            <span class="admin-badge" style="background: #e74c3c; color: #fff;">
                {{ $messages->where('status', '!=', 'erledigt')->count() }} offen
            </span>
            <span class="admin-badge">{{ $messages->count() }} gesamt</span>
        </div>
    </div>

    <div class="admin-toolbar" style="margin-bottom: 18px; gap: 8px;">
        <button class="shop-button" id="tab-alle" onclick="filterAnfragen('alle')">Alle</button>
        <button class="shop-button-light" id="tab-offen" onclick="filterAnfragen('offen')">Offen</button>
        <button class="shop-button-light" id="tab-erledigt" onclick="filterAnfragen('erledigt')">Erledigt</button>
    </div>

    <div class="admin-panel">
        <div class="admin-table-wrap">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name / E-Mail</th>
                        <th>Betreff &amp; Nachricht</th>
                        <th>Datum</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="anfragen-tbody">
                    @forelse ($messages as $msg)
                        @php $isErledigt = $msg->status === 'erledigt'; @endphp
                        <tr id="row-{{ $msg->id }}" data-status="{{ $msg->status }}" style="{{ $isErledigt ? 'opacity:0.55;' : '' }}">
                            <td><strong>#{{ $msg->id }}</strong></td>
                            <td>
                                <strong>{{ $msg->name }}</strong><br>
                                <a href="mailto:{{ $msg->email }}" class="shop-note">{{ $msg->email }}</a>
                            </td>
                            <td style="max-width:420px;">
                                <strong>{{ $msg->subject }}</strong><br>
                                <span class="shop-note">{{ \Illuminate\Support\Str::limit($msg->message, 160) }}</span>
                            </td>
                            <td><span class="shop-note">{{ $msg->created_at->format('d.m.Y H:i') }}</span></td>
                            <td>
                                <span class="admin-badge anfragen-status-badge"
                                    style="{{ $isErledigt ? 'background:#2ecc71;color:#fff;' : 'background:#e74c3c;color:#fff;' }}">
                                    {{ $msg->status }}
                                </span>
                            </td>
                            <td>
                                @unless ($isErledigt)
                                    <button class="shop-button-light erledigt-btn" data-id="{{ $msg->id }}" onclick="markErledigt(this)" style="white-space:nowrap;">
                                        <i class="fas fa-check"></i> Erledigt
                                    </button>
                                @else
                                    <span class="shop-note">&#10003;</span>
                                @endunless
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6"><div class="shop-note">Noch keine Anfragen eingegangen.</div></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <script>
        function filterAnfragen(filter) {
            document.querySelectorAll('#anfragen-tbody tr[data-status]').forEach(function (row) {
                var status = row.getAttribute('data-status');
                row.style.display = (filter === 'alle' || status === filter) ? '' : 'none';
            });
            ['alle', 'offen', 'erledigt'].forEach(function (tab) {
                var btn = document.getElementById('tab-' + tab);
                if (btn) btn.className = (tab === filter) ? 'shop-button' : 'shop-button-light';
            });
        }

        function markErledigt(btn) {
            var id = btn.getAttribute('data-id');
            if (!id) return;
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i>';

            fetch('{{ url('/admin/anfragen') }}/' + id + '/erledigt', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
            })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (data.ok) {
                    var row = document.getElementById('row-' + id);
                    if (row) {
                        row.setAttribute('data-status', 'erledigt');
                        row.style.opacity = '0.55';
                        var badge = row.querySelector('.anfragen-status-badge');
                        if (badge) { badge.textContent = 'erledigt'; badge.style.background = '#2ecc71'; badge.style.color = '#fff'; }
                        btn.parentNode.innerHTML = '<span class="shop-note">&#10003;</span>';
                    }
                } else {
                    btn.disabled = false;
                    btn.innerHTML = '<i class="fas fa-check"></i> Erledigt';
                    alert('Fehler: ' + (data.error || 'Unbekannt'));
                }
            })
            .catch(function () {
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-check"></i> Erledigt';
                alert('Netzwerkfehler. Bitte erneut versuchen.');
            });
        }
    </script>
@endsection