@extends('admin.panel.layout')
@section('admin_title', 'Tester')

@section('admin_content')
<style>
    .at-header { display:flex; align-items:center; gap:14px; margin-bottom:6px; flex-wrap:wrap; }
    .at-title { font-size:1.55rem; font-weight:800; color:#0f172a; margin:0; letter-spacing:-.02em; }
    .at-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:20px; font-size:.78rem; font-weight:700; }
    .at-badge-total { background:#e0e7ff; color:#4338ca; }
    .at-badge-active { background:#dcfce7; color:#16a34a; }

    .at-card {
        background:#fff;
        border:1px solid #e2e8f0;
        border-radius:16px;
        padding:28px;
        box-shadow:0 1px 6px rgba(0,0,0,.04);
    }
    .at-card-title {
        font-size:1rem;
        font-weight:800;
        color:#0f172a;
        margin:0 0 18px;
        display:flex;
        align-items:center;
        gap:8px;
    }
    .at-card-title i { color:#6366f1; }

    /* Flash messages */
    .at-flash { padding:12px 16px; border-radius:10px; font-size:.88rem; font-weight:600; margin-bottom:24px; display:flex; align-items:center; gap:8px; }
    .at-flash-success { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; }
    .at-flash-error   { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }

    /* Form elements */
    .at-label { display:block; font-size:.82rem; font-weight:700; color:#334155; margin-bottom:5px; }
    .at-input {
        width:100%;
        padding:9px 12px;
        font-size:.88rem;
        border:1.5px solid #e2e8f0;
        border-radius:9px;
        background:#f8fafc;
        color:#0f172a;
        outline:none;
        transition:border-color .15s;
        box-sizing:border-box;
        font-family:inherit;
    }
    .at-input:focus { border-color:#6366f1; background:#fff; }
    textarea.at-input { resize:vertical; min-height:80px; }
    select.at-input { cursor:pointer; }
    .at-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .at-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
    .at-field { margin-bottom:14px; }

    /* Buttons */
    .at-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:9px; font-size:.83rem; font-weight:700; border:none; cursor:pointer; transition:background .15s, transform .1s; font-family:inherit; }
    .at-btn:hover { transform:translateY(-1px); }
    .at-btn-primary { background:#6366f1; color:#fff; box-shadow:0 2px 8px rgba(99,102,241,.25); }
    .at-btn-primary:hover { background:#4f46e5; }
    .at-btn-danger { background:#fee2e2; color:#b91c1c; }
    .at-btn-danger:hover { background:#fecaca; }
    .at-btn-sm { padding:5px 11px; font-size:.78rem; }
    .at-btn-toggle-on  { background:#dcfce7; color:#15803d; }
    .at-btn-toggle-on:hover  { background:#bbf7d0; }
    .at-btn-toggle-off { background:#f1f5f9; color:#64748b; }
    .at-btn-toggle-off:hover { background:#e2e8f0; }

    /* Table */
    .at-table { width:100%; border-collapse:collapse; font-size:.86rem; }
    .at-table th { text-align:left; font-size:.75rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; padding:8px 12px; border-bottom:2px solid #f1f5f9; white-space:nowrap; }
    .at-table td { padding:11px 12px; border-bottom:1px solid #f1f5f9; color:#334155; vertical-align:middle; }
    .at-table tr:last-child td { border-bottom:none; }
    .at-table tr:hover td { background:#fafafa; }

    /* Bestätigt-Badge */
    .at-confirmed   { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:.72rem; font-weight:700; background:#dcfce7; color:#15803d; }
    .at-unconfirmed { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:.72rem; font-weight:700; background:#fef9c3; color:#a16207; }
    .at-btn-confirm { background:#f0fdf4; color:#15803d; border:1.5px solid #bbf7d0; }
    .at-btn-confirm:hover { background:#dcfce7; border-color:#86efac; }

    /* Platform badges */
    .plt-badge { display:inline-flex; align-items:center; gap:3px; font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:6px; }
    .plt-ios     { background:rgba(10,132,255,.1); color:#0A84FF; }
    .plt-android { background:rgba(25,195,125,.1); color:#16a34a; }
    .plt-windows { background:rgba(27,108,242,.1); color:#1B6CF2; }
    .plt-status-active  { background:#dcfce7; color:#16a34a; }
    .plt-status-beta    { background:#fef9c3; color:#a16207; }
    .plt-status-closed  { background:#f1f5f9; color:#64748b; }

    /* Inline edit toggle */
    .at-edit-row { display:none; background:#f8fafc; }
    .at-edit-row.is-open { display:table-row; }
    .at-edit-inner { padding:16px 12px; }

    /* Section spacing */
    .at-sections { display:grid; gap:24px; }
    .at-table-wrap { overflow-x:auto; }
    @media(max-width:700px) { .at-row,.at-row-3 { grid-template-columns:1fr; } }
</style>

{{-- Page header --}}
<div class="at-header">
    <h1 class="at-title"><i class="fas fa-flask" style="color:#6366f1;margin-right:6px;"></i>Tester-Portal</h1>
    <span class="at-badge at-badge-total"><i class="fas fa-users"></i> {{ $testers->count() }} Gesamt</span>
    <span class="at-badge at-badge-active"><i class="fas fa-circle"></i> {{ $testers->where('is_active', true)->count() }} Aktiv</span>
</div>
<p style="color:#64748b;font-size:.9rem;margin:0 0 28px;">Verwalte Beta-Tester, Test-Apps und versende Bulk-Mails.</p>

{{-- Flash messages --}}
@if(session('success'))
<div class="at-flash at-flash-success"><i class="fas fa-check-circle"></i> {{ session('success') }}</div>
@endif
@if(session('error'))
<div class="at-flash at-flash-error"><i class="fas fa-exclamation-circle"></i> {{ session('error') }}</div>
@endif

<div class="at-sections">

    {{-- ── Send Mail ── --}}
    <div class="at-card">
        <div class="at-card-title"><i class="fas fa-paper-plane"></i> Bulk-Mail an Tester</div>
        <form method="POST" action="{{ route('admin.panel.tester.mail') }}">
            @csrf
            <div class="at-field">
                <label class="at-label">Betreff</label>
                <input type="text" name="subject" class="at-input" placeholder="Neuer Test für App XY – bitte jetzt testen" required maxlength="200">
            </div>
            <div class="at-row" style="align-items:end;gap:14px;margin-bottom:14px;">
                <div>
                    <label class="at-label">Plattform-Filter</label>
                    <select name="platform" class="at-input">
                        <option value="all">Alle Plattformen</option>
                        <option value="ios">iOS</option>
                        <option value="android">Android</option>
                        <option value="windows">Windows</option>
                    </select>
                </div>
                <div></div>
            </div>
            <div class="at-field">
                <label class="at-label">Nachricht</label>
                <textarea name="message" class="at-input" placeholder="Hallo,&#10;&#10;wir haben eine neue Version bereit..." required maxlength="5000"></textarea>
            </div>
            <button type="submit" class="at-btn at-btn-primary">
                <i class="fas fa-paper-plane"></i> Mail senden
            </button>
        </form>
    </div>

    {{-- ── Test Apps ── --}}
    <div class="at-card">
        <div class="at-card-title"><i class="fas fa-mobile-alt"></i> Test-Apps ({{ $apps->count() }})</div>

        @if($apps->count())
        <div class="at-table-wrap" style="margin-bottom:28px;">
            <table class="at-table">
                <thead>
                    <tr>
                        <th>App</th>
                        <th>Plattform</th>
                        <th>Version</th>
                        <th>Status</th>
                        <th>Links</th>
                        <th>Reihenfolge</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($apps as $app)
                    <tr>
                        <td>
                            <span style="font-size:1.2rem;margin-right:8px;">{{ $app->icon }}</span>
                            <strong>{{ $app->name }}</strong>
                            @if($app->notes)<br><span style="font-size:.78rem;color:#94a3b8;">{{ $app->notes }}</span>@endif
                        </td>
                        <td>
                            @if($app->platform === 'ios')<span class="plt-badge plt-ios"><i class="fab fa-apple"></i> iOS</span>
                            @elseif($app->platform === 'android')<span class="plt-badge plt-android"><i class="fab fa-android"></i> Android</span>
                            @elseif($app->platform === 'windows')<span class="plt-badge plt-windows"><i class="fab fa-windows"></i> Windows</span>
                            @endif
                        </td>
                        <td>{{ $app->version ?: '—' }}</td>
                        <td>
                            @if($app->status === 'active')<span class="plt-badge plt-status-active">Aktiv</span>
                            @elseif($app->status === 'beta')<span class="plt-badge plt-status-beta">Beta</span>
                            @else<span class="plt-badge plt-status-closed">Geschlossen</span>@endif
                        </td>
                        <td>
                            @if($app->testflight_link)<a href="{{ $app->testflight_link }}" target="_blank" style="color:#6366f1;font-size:.8rem;font-weight:700;">TestFlight</a><br>@endif
                            @if($app->play_store_link)<a href="{{ $app->play_store_link }}" target="_blank" style="color:#16a34a;font-size:.8rem;font-weight:700;">Play Store</a>@endif
                        </td>
                        <td>{{ $app->sort_order }}</td>
                        <td>
                            <button type="button" class="at-btn at-btn-sm at-btn-toggle-off"
                                onclick="document.getElementById('edit-app-{{ $app->id }}').classList.toggle('is-open')">
                                <i class="fas fa-pencil-alt"></i> Edit
                            </button>
                        </td>
                    </tr>
                    <tr id="edit-app-{{ $app->id }}" class="at-edit-row">
                        <td colspan="7">
                            <div class="at-edit-inner">
                                <form method="POST" action="{{ route('admin.panel.tester.apps.update', $app) }}">
                                    @csrf @method('PUT')
                                    <div class="at-row-3" style="margin-bottom:12px;">
                                        <div>
                                            <label class="at-label">Name</label>
                                            <input type="text" name="name" class="at-input" value="{{ $app->name }}" required>
                                        </div>
                                        <div>
                                            <label class="at-label">Plattform</label>
                                            <select name="platform" class="at-input">
                                                <option value="ios" {{ $app->platform==='ios'?'selected':'' }}>iOS</option>
                                                <option value="android" {{ $app->platform==='android'?'selected':'' }}>Android</option>
                                                <option value="windows" {{ $app->platform==='windows'?'selected':'' }}>Windows</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label class="at-label">Status</label>
                                            <select name="status" class="at-input">
                                                <option value="active" {{ $app->status==='active'?'selected':'' }}>Aktiv</option>
                                                <option value="beta" {{ $app->status==='beta'?'selected':'' }}>Beta</option>
                                                <option value="closed" {{ $app->status==='closed'?'selected':'' }}>Geschlossen</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="at-row" style="margin-bottom:12px;">
                                        <div>
                                            <label class="at-label">Version</label>
                                            <input type="text" name="version" class="at-input" value="{{ $app->version }}">
                                        </div>
                                        <div>
                                            <label class="at-label">Icon (Emoji)</label>
                                            <input type="text" name="icon" class="at-input" value="{{ $app->icon }}" maxlength="10">
                                        </div>
                                    </div>
                                    <div class="at-row" style="margin-bottom:12px;">
                                        <div>
                                            <label class="at-label">TestFlight-Link</label>
                                            <input type="url" name="testflight_link" class="at-input" value="{{ $app->testflight_link }}">
                                        </div>
                                        <div>
                                            <label class="at-label">Play Store Beta-Link</label>
                                            <input type="url" name="play_store_link" class="at-input" value="{{ $app->play_store_link }}">
                                        </div>
                                    </div>
                                    <div class="at-field">
                                        <label class="at-label">Beschreibung</label>
                                        <textarea name="description" class="at-input" style="min-height:60px;">{{ $app->description }}</textarea>
                                    </div>
                                    <div class="at-row" style="margin-bottom:14px;">
                                        <div>
                                            <label class="at-label">Notizen (intern)</label>
                                            <input type="text" name="notes" class="at-input" value="{{ $app->notes }}">
                                        </div>
                                        <div>
                                            <label class="at-label">Reihenfolge</label>
                                            <input type="number" name="sort_order" class="at-input" value="{{ $app->sort_order }}">
                                        </div>
                                    </div>
                                    <button type="submit" class="at-btn at-btn-primary at-btn-sm">
                                        <i class="fas fa-save"></i> Speichern
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <p style="color:#94a3b8;font-size:.9rem;margin-bottom:24px;">Noch keine Apps hinzugefügt.</p>
        @endif

        {{-- Add new app --}}
        <div style="border-top:1px solid #f1f5f9;padding-top:22px;">
            <div style="font-size:.9rem;font-weight:700;color:#334155;margin-bottom:14px;"><i class="fas fa-plus" style="color:#6366f1;margin-right:6px;"></i>Neue App hinzufügen</div>
            <form method="POST" action="{{ route('admin.panel.tester.apps.store') }}">
                @csrf
                <div class="at-row-3" style="margin-bottom:12px;">
                    <div>
                        <label class="at-label">Name *</label>
                        <input type="text" name="name" class="at-input" placeholder="App-Name" required>
                    </div>
                    <div>
                        <label class="at-label">Plattform *</label>
                        <select name="platform" class="at-input">
                            <option value="ios">iOS</option>
                            <option value="android">Android</option>
                            <option value="windows">Windows</option>
                        </select>
                    </div>
                    <div>
                        <label class="at-label">Status *</label>
                        <select name="status" class="at-input">
                            <option value="active">Aktiv</option>
                            <option value="beta">Beta</option>
                            <option value="closed">Geschlossen</option>
                        </select>
                    </div>
                </div>
                <div class="at-row" style="margin-bottom:12px;">
                    <div>
                        <label class="at-label">Version</label>
                        <input type="text" name="version" class="at-input" placeholder="1.0.0">
                    </div>
                    <div>
                        <label class="at-label">Icon (Emoji)</label>
                        <input type="text" name="icon" class="at-input" placeholder="📱" maxlength="10">
                    </div>
                </div>
                <div class="at-row" style="margin-bottom:12px;">
                    <div>
                        <label class="at-label">TestFlight-Link</label>
                        <input type="url" name="testflight_link" class="at-input" placeholder="https://testflight.apple.com/...">
                    </div>
                    <div>
                        <label class="at-label">Play Store Beta-Link</label>
                        <input type="url" name="play_store_link" class="at-input" placeholder="https://play.google.com/...">
                    </div>
                </div>
                <div class="at-field">
                    <label class="at-label">Beschreibung</label>
                    <textarea name="description" class="at-input" placeholder="Kurze Beschreibung der App und des Tests..."></textarea>
                </div>
                <div class="at-row" style="margin-bottom:16px;">
                    <div>
                        <label class="at-label">Notizen (intern)</label>
                        <input type="text" name="notes" class="at-input" placeholder="Nur für Admin sichtbar">
                    </div>
                    <div>
                        <label class="at-label">Reihenfolge</label>
                        <input type="number" name="sort_order" class="at-input" value="0">
                    </div>
                </div>
                <button type="submit" class="at-btn at-btn-primary">
                    <i class="fas fa-plus"></i> App hinzufügen
                </button>
            </form>
        </div>
    </div>

    {{-- ── Testers list ── --}}
    <div class="at-card">
        <div class="at-card-title"><i class="fas fa-users"></i> Tester ({{ $testers->count() }})</div>

        @if($testers->count())
        <div class="at-table-wrap">
            <table class="at-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>E-Mail</th>
                        <th>Plattformen</th>
                        <th>Gerät</th>
                        <th>Registriert</th>
                        <th>Bestätigt</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($testers as $tester)
                    <tr>
                        <td>
                            <div style="display:flex;align-items:center;gap:7px;flex-wrap:wrap;">
                                <strong>{{ $tester->name }}</strong>
                                @if($tester->created_at->isAfter(now()->subDays(3)))
                                <span style="display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;background:#fef9c3;color:#a16207;font-size:.68rem;font-weight:800;letter-spacing:.04em;">
                                    ✨ NEU
                                </span>
                                @endif
                            </div>
                            @if($tester->notes)<span style="font-size:.76rem;color:#94a3b8;" title="{{ $tester->notes }}">{{ Str::limit($tester->notes, 50) }}</span>@endif
                        </td>
                        <td style="font-size:.84rem;">{{ $tester->email }}</td>
                        <td>
                            <div style="display:flex;flex-wrap:wrap;gap:4px;">
                                @foreach((array)$tester->platforms as $plt)
                                    @if($plt === 'ios')<span class="plt-badge plt-ios"><i class="fab fa-apple"></i> iOS</span>
                                    @elseif($plt === 'android')<span class="plt-badge plt-android"><i class="fab fa-android"></i> Android</span>
                                    @elseif($plt === 'windows')<span class="plt-badge plt-windows"><i class="fab fa-windows"></i> Windows</span>
                                    @endif
                                @endforeach
                            </div>
                        </td>
                        <td style="font-size:.84rem;color:#64748b;">{{ $tester->device_model ?: '—' }}</td>
                        <td style="white-space:nowrap;">
                            <span style="font-size:.83rem;color:#334155;font-weight:600;"
                                  title="{{ $tester->created_at->format('d.m.Y H:i') }} Uhr">
                                {{ $tester->created_at->locale('de')->diffForHumans() }}
                            </span>
                            <br>
                            <span style="font-size:.74rem;color:#94a3b8;">{{ $tester->created_at->format('d.m.Y') }}</span>
                        </td>
                        <td style="white-space:nowrap;">
                            @if($tester->confirmed_at)
                                <span class="at-confirmed" title="Bestätigt am {{ $tester->confirmed_at->format('d.m.Y H:i') }}">
                                    <i class="fas fa-check"></i> Bestätigt
                                </span>
                                <br>
                                <span style="font-size:.72rem;color:#94a3b8;">{{ $tester->confirmed_at->format('d.m.Y') }}</span>
                            @else
                                <span class="at-unconfirmed"><i class="fas fa-clock"></i> Ausstehend</span>
                            @endif
                        </td>
                        <td>
                            <form method="POST" action="{{ route('admin.panel.tester.toggle', $tester) }}" style="display:inline;">
                                @csrf
                                <button type="submit" class="at-btn at-btn-sm {{ $tester->is_active ? 'at-btn-toggle-on' : 'at-btn-toggle-off' }}">
                                    {{ $tester->is_active ? 'Aktiv' : 'Inaktiv' }}
                                </button>
                            </form>
                        </td>
                        <td style="white-space:nowrap;">
                            @if(!$tester->confirmed_at)
                            <form method="POST" action="{{ route('admin.panel.tester.confirm', $tester) }}" style="display:inline;">
                                @csrf
                                <button type="submit" class="at-btn at-btn-sm at-btn-confirm"
                                    title="Willkommens-Mail senden & als Tester bestätigen">
                                    <i class="fas fa-check-circle"></i> Bestätigen
                                </button>
                            </form>
                            @else
                            <form method="POST" action="{{ route('admin.panel.tester.confirm', $tester) }}" style="display:inline;">
                                @csrf
                                <button type="submit" class="at-btn at-btn-sm at-btn-toggle-off"
                                    title="Mail erneut senden"
                                    onclick="return confirm('Mail erneut senden an {{ addslashes($tester->email) }}?')">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </form>
                            @endif
                            <form method="POST" action="{{ route('admin.panel.tester.destroy', $tester) }}" style="display:inline;"
                                onsubmit="return confirm('Tester {{ addslashes($tester->name) }} wirklich löschen?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="at-btn at-btn-sm at-btn-danger">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <p style="color:#94a3b8;font-size:.9rem;">Noch keine Tester registriert.</p>
        @endif
    </div>

</div>
@endsection