@extends('layouts.app', ['title' => 'Instrumen Angket'])

@section('content')
    <div class="showcase-grid">
        <div class="premium-banner">
            <div class="premium-eyebrow">Dynamic Questionnaire</div>
            <h2>Instrumen Angket Dinamis untuk Pengambilan Data Penggunaan Sistem RPS</h2>
            <p>Admin dapat membuat instrumen baru, mengatur butir secara dinamis, mengaktifkan/nonaktifkan tampilan user, mengimpor template Excel, dan mengekspor hasil pengisian setiap instrumen.</p>
            <div class="premium-metrics">
                <div class="premium-metric"><strong>{{ $stats['total'] }}</strong><span>Total instrumen.</span></div>
                <div class="premium-metric"><strong>{{ $stats['active'] }}</strong><span>Instrumen aktif.</span></div>
                <div class="premium-metric"><strong>{{ $stats['responses'] }}</strong><span>Total respons masuk.</span></div>
            </div>
        </div>
        <div class="luxury-panel">
            <h3 class="section-title" style="font-size: 1.45rem;">Aksi Cepat</h3>
            <div class="stack">
                <a class="btn" href="{{ route('admin.questionnaires.create') }}">+ Buat Instrumen Baru</a>
                <a class="btn secondary" href="{{ route('admin.questionnaires.template') }}">Download Template Excel</a>

                <div class="import-card">
                    <h4>Buat Instrumen dari Template</h4>
                    <p class="helper">Upload file Excel yang sudah diisi. Setelah tombol di bawah diklik, sistem langsung membuat instrumen/angket baru dari isi template, lalu membuka halaman edit untuk pemeriksaan akhir.</p>
                    <form method="POST" action="{{ route('admin.questionnaires.import') }}" enctype="multipart/form-data">
                        @csrf
                        <label for="template_file">File Template Angket Terisi</label>
                        <input id="template_file" name="template_file" type="file" accept=".xlsx,.xls" required>
                        <div class="actions" style="margin-top: 12px;">
                            <button class="btn ghost" type="submit">Import & Buat Instrumen Baru</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="panel" style="margin-top: 20px;">
        <h3 class="section-title">Daftar Instrumen Angket</h3>
        <p class="helper">Tombol geser mengatur instrumen yang tampil di halaman user. Menonaktifkan instrumen tidak menghapus data respons.</p>
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Judul</th>
                        <th>Status</th>
                        <th>Butir</th>
                        <th>Respons</th>
                        <th>Periode</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($questionnaires as $questionnaire)
                        <tr>
                            <td>
                                <strong>{{ $questionnaire->title }}</strong><br>
                                <span class="meta">{{ $questionnaire->description ?: 'Tanpa deskripsi' }}</span>
                            </td>
                            <td>
                                <form method="POST" action="{{ route('admin.questionnaires.toggle', $questionnaire) }}">
                                    @csrf
                                    @method('PATCH')
                                    <label class="questionnaire-switch compact-switch">
                                        <input type="checkbox" onchange="this.form.submit()" @checked($questionnaire->is_active)>
                                        <span class="switch-slider"></span>
                                        <strong>{{ $questionnaire->is_active ? 'Aktif' : 'Nonaktif' }}</strong>
                                    </label>
                                </form>
                            </td>
                            <td>{{ $questionnaire->questions_count }}</td>
                            <td>{{ $questionnaire->responses_count }}</td>
                            <td>
                                <span class="meta">Buka: {{ $questionnaire->opened_at?->format('d-m-Y H:i') ?: 'Langsung' }}</span><br>
                                <span class="meta">Tutup: {{ $questionnaire->closed_at?->format('d-m-Y H:i') ?: 'Tanpa batas' }}</span>
                            </td>
                            <td>
                                <div class="action-row">
                                    <a class="btn secondary" href="{{ route('admin.questionnaires.edit', $questionnaire) }}">Edit</a>
                                    <a class="btn secondary" href="{{ route('admin.questionnaires.show', $questionnaire) }}">Hasil</a>
                                    <a class="btn secondary" href="{{ route('admin.questionnaires.infographic', $questionnaire) }}">Infografis</a>
                                    <a class="btn secondary" href="{{ route('admin.questionnaires.export', $questionnaire) }}">Export</a>
                                    <form method="POST" action="{{ url('/admin/questionnaires/'.$questionnaire->id.'/reset-responses') }}" onsubmit="return confirm('Reset seluruh hasil pengisian angket ini? Instrumen, butir pertanyaan, dan opsi jawaban tetap aman, tetapi semua respons/jawaban akan dikosongkan.')">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn warning" type="submit" {{ $questionnaire->responses_count < 1 ? 'disabled' : '' }}>Reset</button>
                                    </form>
                                    <form method="POST" action="{{ route('admin.questionnaires.destroy', $questionnaire) }}" onsubmit="return confirm('Hapus instrumen ini beserta seluruh hasil pengisiannya?')">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn danger" type="submit">Hapus</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6">Belum ada instrumen angket.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div style="margin-top: 16px;">{{ $questionnaires->links() }}</div>
    </div>

    <style>
        .questionnaire-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; }
        .questionnaire-switch input { position: absolute; opacity: 0; pointer-events: none; }
        .switch-slider { position: relative; width: 54px; height: 30px; border-radius: 999px; background: #d9e5f5; border: 1px solid #bfd4ef; transition: 0.2s ease; flex: 0 0 auto; }
        .switch-slider::after { content: ""; position: absolute; width: 22px; height: 22px; top: 3px; left: 4px; border-radius: 999px; background: #fff; box-shadow: 0 4px 12px rgba(13,34,66,0.18); transition: 0.2s ease; }
        .questionnaire-switch input:checked + .switch-slider { background: linear-gradient(180deg, var(--primary-bright), var(--primary)); border-color: var(--primary); }
        .questionnaire-switch input:checked + .switch-slider::after { left: 26px; }
        .compact-switch strong { min-width: 72px; }
        .import-card { border: 1px solid rgba(15,82,186,0.18); border-radius: 18px; padding: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(241,247,255,0.72)); }
        .import-card h4 { margin: 0 0 6px; color: var(--primary-dark); }
        .btn.warning { color: #9a5b00; border-color: rgba(245, 158, 11, .35); background: #fff7e6; }
        .btn.warning:hover { background: #ffefc2; }
        .btn.warning:disabled { opacity: .45; cursor: not-allowed; }
    </style>
@endsection