@extends('layouts.app')
@section('title', 'Detail Panel Test')
@section('content')

<div class="d-flex align-items-center gap-2 mb-4">
    <a href="{{ route('panel-tests.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left"></i>
    </a>
    <div class="flex-grow-1">
        <h4 class="fw-bold mb-0">{{ $panelTest->title }}</h4>
        <small class="text-muted">
            {{ $panelTest->product->name }} &bull;
            {{ $panelTest->test_date->format('d M Y') }}
        </small>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('panel-tests.edit', $panelTest) }}" class="btn btn-warning btn-sm">
            <i class="bi bi-pencil"></i> Edit
        </a>
        @if($panelTest->status === 'draft')
        <form method="POST" action="{{ route('panel-tests.activate', $panelTest) }}">
            @csrf
            <button class="btn btn-success btn-sm" onclick="return confirm('Aktifkan panel test ini?')">
                <i class="bi bi-play-fill"></i> Aktifkan
            </button>
        </form>
        @elseif($panelTest->status === 'active')
        <form method="POST" action="{{ route('panel-tests.close', $panelTest) }}">
            @csrf
            <button class="btn btn-danger btn-sm" onclick="return confirm('Tutup panel test ini?')">
                <i class="bi bi-stop-fill"></i> Tutup
            </button>
        </form>
        @endif
    </div>
</div>


<div class="row g-3">

    {{-- Kolom Kiri --}}
    <div class="col-lg-4">

        {{-- Info Panel Test --}}
        <div class="card mb-3">
            <div class="card-header bg-white py-3">
                <h6 class="fw-semibold mb-0">Informasi Test</h6>
            </div>
            <div class="card-body">
                <div class="text-center mb-3">
                    <span class="badge status-{{ $panelTest->status }} px-3 py-2 fs-6">
                        {{ ucfirst($panelTest->status) }}
                    </span>
                </div>
                <table class="table table-borderless table-sm mb-0">
                    @if($panelTest->test_number)
                    <tr>
                        <td class="text-muted" width="110">No. Test</td>
                        <td><code class="fw-bold" style="color:#1e3a5f;font-size:14px">{{ $panelTest->test_number }}</code></td>
                    </tr>
                    @endif
                    <tr><td class="text-muted">Produk</td><td class="fw-medium">{{ $panelTest->product->name }}</td></tr>
                    <tr><td class="text-muted">Tanggal</td><td>{{ $panelTest->test_date->format('d M Y') }}</td></tr>
                    <tr><td class="text-muted">Lokasi</td><td>{{ $panelTest->location ?: '-' }}</td></tr>
                    <tr>
                        <td class="text-muted">Tipe</td>
                        <td>
                            @if($panelTest->type === 'internal')
                            <span class="badge bg-info text-dark">Internal</span>
                            @elseif($panelTest->type === 'public')
                            <span class="badge bg-success">Publik</span>
                            @else
                            <span class="badge bg-secondary">Regional</span>
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <td class="text-muted">Sampel</td>
                        <td><span class="badge bg-info text-dark">{{ $panelTest->samples->count() }} sampel</span></td>
                    </tr>
                    <tr>
                        <td class="text-muted">Pertanyaan</td>
                        <td><span class="badge bg-primary">{{ $panelTest->questions->count() }} total</span></td>
                    </tr>
                    <tr>
                        <td class="text-muted">Peserta</td>
                        <td><span class="badge bg-success">{{ $panelTest->testSessions->where('status','completed')->count() }} orang</span></td>
                    </tr>
                </table>
                @if($panelTest->description)
                <hr>
                <p class="text-muted small mb-0">{{ $panelTest->description }}</p>
                @endif
            </div>
        </div>

        {{-- QR Code & Link --}}
        @if(in_array($panelTest->type, ['internal','public']))
        <div class="card mb-3">
            <div class="card-header bg-white py-3">
                <h6 class="fw-semibold mb-0">
                    <i class="bi bi-qr-code text-success"></i>
                    QR Code & Link {{ $panelTest->type === 'internal' ? 'Internal' : 'Publik' }}
                </h6>
            </div>
            <div class="card-body">
                @if($panelTest->access_token)
                <div class="mb-3">
                    <label class="form-label small fw-medium text-muted">Link Panel Test</label>
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control form-control-sm" id="publicLink"
                            value="{{ route('public-test.show', $panelTest->access_token) }}" readonly>
                        <button class="btn btn-outline-success btn-sm" onclick="copyLink()">
                            <i class="bi bi-clipboard"></i>
                        </button>
                    </div>
                    <small class="text-muted">
                        <i class="bi bi-clock"></i>
                        Berlaku: {{ $panelTest->token_expires_at?->format('d M Y') ?? 'Tidak terbatas' }}
                    </small>
                </div>
                <div class="text-center p-3 rounded mb-3" style="background:#f8fafc;border:1px solid #e2e8f0">
                    <p class="text-muted small fw-medium mb-2"><i class="bi bi-qr-code"></i> Scan untuk Mengikuti Test</p>
                    <div class="d-flex justify-content-center mb-2">
                        <div style="padding:12px;background:#fff;border:2px solid #1e3a5f;border-radius:8px">
                            <div id="qrCanvas"></div>
                        </div>
                    </div>
                    <p class="text-muted mb-3" style="font-size:11px">Arahkan kamera HP ke QR Code di atas</p>
                    <div class="d-flex gap-2 flex-wrap justify-content-center">
                        <button onclick="downloadQRPNG()" class="btn btn-sm btn-primary">
                            <i class="bi bi-download"></i> PNG
                        </button>
                        <a href="{{ route('panel-tests.qrcode', $panelTest) }}" class="btn btn-sm btn-outline-secondary" target="_blank">
                            <i class="bi bi-fullscreen"></i> Penuh
                        </a>
                    </div>
                </div>
                @else
                <div class="text-center py-3">
                    <i class="bi bi-qr-code text-muted" style="font-size:3rem"></i>
                    <p class="text-muted small mt-2 mb-0">Generate link untuk membuat QR Code</p>
                </div>
                @endif
                @if($panelTest->status === 'active')
                <form method="POST" action="{{ route('panel-tests.generate-token', $panelTest) }}">
                    @csrf
                    <button type="submit" class="btn btn-success btn-sm w-100">
                        <i class="bi bi-arrow-clockwise"></i>
                        {{ $panelTest->access_token ? 'Generate Link & QR Baru' : 'Generate Link & QR' }}
                    </button>
                </form>
                @endif
            </div>
        </div>
        @endif

        {{-- Daftar Peserta --}}
        <div class="card">
            <div class="card-header bg-white py-3">
                <h6 class="fw-semibold mb-0">Peserta yang Sudah Mengisi</h6>
            </div>
            <div class="card-body p-0">
                @forelse($panelTest->testSessions->where('status','completed') as $session)
                <div class="d-flex align-items-center gap-2 px-3 py-2 border-bottom">
                    <div style="width:30px;height:30px;background:#e2e8f0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600">
                        {{ strtoupper(substr($session->user->name, 0, 1)) }}
                    </div>
                    <div>
                        <div class="fw-medium" style="font-size:13px">{{ $session->user->name }}</div>
                        <small class="text-muted">{{ $session->completed_at->format('d M, H:i') }}</small>
                    </div>
                </div>
                @empty
                <div class="text-center text-muted py-3 small">Belum ada peserta</div>
                @endforelse
            </div>
        </div>

    </div>

    {{-- Kolom Kanan --}}
    <div class="col-lg-8">

        @php $sampleColors = ['3b82f6','22c55e','f59e0b','ef4444','8b5cf6']; @endphp

        {{-- Daftar Sampel --}}
        @foreach($panelTest->samples as $si => $sample)
        @php $color = $sampleColors[$si % 5]; @endphp
        <div class="card mb-3" style="border-left:4px solid #{{ $color }}">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h6 class="fw-bold mb-0">
                        <span class="badge me-2" style="background:#{{ $color }}">Sampel {{ $si + 1 }}</span>
                        {{ $sample->name }}
                        @if($sample->code)<code class="ms-1 small text-muted">{{ $sample->code }}</code>@endif
                    </h6>
                    @if($sample->description)<small class="text-muted">{{ $sample->description }}</small>@endif
                </div>
                <div class="d-flex gap-2 align-items-center">
                    <span class="badge bg-light text-dark">{{ $sample->questions->count() }} pertanyaan</span>
                    @if($panelTest->status === 'draft')
                    <form method="POST" action="{{ route('samples.destroy', $sample) }}" onsubmit="return confirm('Hapus sampel ini?')">
                        @csrf @method('DELETE')
                        <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i> Hapus</button>
                    </form>
                    @endif
                </div>
            </div>
            <div class="card-body">
                @if($panelTest->status === 'draft' && $panelTest->samples->count() > 1)
                <div class="mb-3 p-3 rounded" style="background:#fffbeb;border:1px solid #fde68a">
                    <div class="fw-medium small text-warning-emphasis mb-2">
                        <i class="bi bi-files text-warning"></i>
                        Salin pertanyaan dari sampel lain ke <strong>{{ $sample->name }}</strong>:
                    </div>
                    <form method="POST" action="{{ route('samples.copy-questions', $sample) }}" class="d-flex gap-2 align-items-center flex-wrap">
                        @csrf
                        <select name="source_sample_id" class="form-select form-select-sm" style="max-width:200px" required>
                            <option value="">-- Pilih sumber --</option>
                            @foreach($panelTest->samples->where('id', '!=', $sample->id) as $other)
                            <option value="{{ $other->id }}">{{ $other->name }} ({{ $other->questions->count() }} soal)</option>
                            @endforeach
                        </select>
                        <div class="form-check form-check-inline mb-0">
                            <input class="form-check-input" type="checkbox" name="replace_existing" value="1" id="replace-{{ $sample->id }}">
                            <label class="form-check-label small" for="replace-{{ $sample->id }}">Hapus pertanyaan lama</label>
                        </div>
                        <button type="submit" class="btn btn-warning btn-sm" onclick="return confirm('Salin pertanyaan?')">
                            <i class="bi bi-files"></i> Salin
                        </button>
                    </form>
                </div>
                @endif

                @forelse($sample->questions as $qi => $q)
                <div class="d-flex gap-2 p-2 border rounded mb-2" style="background:#f8fafc">
                    <div style="width:24px;height:24px;background:#{{ $color }};border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600;flex-shrink:0;margin-top:2px">
                        {{ $qi + 1 }}
                    </div>
                    <div class="flex-grow-1">
                        <div class="fw-medium small">{{ $q->question_text }}</div>
                        <div class="d-flex gap-1 mt-1 flex-wrap">
                            <span class="badge" style="background:#e2e8f0;color:#475569;font-size:10px">{{ $q->question_type }}</span>
                            @if($q->options)
                            @foreach($q->options as $opt)
                            <span class="badge bg-light text-dark" style="font-size:10px">{{ $opt }}</span>
                            @endforeach
                            @endif
                        </div>
                    </div>
                    @if($panelTest->status === 'draft')
                    <form method="POST" action="{{ route('questions.destroy', $q) }}" onsubmit="return confirm('Hapus pertanyaan ini?')">
                        @csrf @method('DELETE')
                        <button class="btn btn-sm btn-outline-danger py-0"><i class="bi bi-trash"></i></button>
                    </form>
                    @endif
                </div>
                @empty
                <div class="text-center text-muted py-3 small">
                    <i class="bi bi-question-circle d-block fs-4 mb-1"></i>
                    Belum ada pertanyaan. Salin dari sampel lain atau tambah manual.
                </div>
                @endforelse

                @if($panelTest->status === 'draft')
                <div class="mt-3 pt-3" style="border-top:1px dashed #e2e8f0">
                    <div class="small fw-medium text-muted mb-2">
                        <i class="bi bi-plus-circle"></i> Tambah pertanyaan ke {{ $sample->name }}:
                    </div>
                    <form method="POST" action="{{ route('samples.questions.store', $sample) }}">
                        @csrf
                        <div class="row g-2">
                            <div class="col-12">
                                <textarea name="question_text" class="form-control form-control-sm" rows="2"
                                    placeholder="Contoh: Bagaimana rasa manis {{ $sample->name }}?" required></textarea>
                            </div>
                            <div class="col-md-4">
                                <select name="question_type" class="form-select form-select-sm"
                                    id="type-{{ $sample->id }}" onchange="toggleOptions({{ $sample->id }})">
                                    <option value="rating">&#11088; Rating (1-5)</option>
                                    <option value="text">&#128172; Teks Bebas</option>
                                    <option value="yes_no">&#9989; Ya/Tidak</option>
                                    <option value="multiple_choice">&#128203; Pilihan Ganda</option>
                                </select>
                            </div>
                            <div class="col-md-5" id="options-{{ $sample->id }}" style="display:none">
                                <textarea name="options" class="form-control form-control-sm" rows="2"
                                    placeholder="A. Pas&#10;B. Kurang&#10;C. Terlalu Manis"></textarea>
                                <small class="text-muted">Satu pilihan per baris</small>
                            </div>
                            <div class="col-md-3">
                                <button type="submit" class="btn btn-sm w-100"
                                    style="background:#{{ $color }};color:#fff;border:none">
                                    <i class="bi bi-plus"></i> Tambah
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                @endif
            </div>
        </div>
        @endforeach

        {{-- Tambah Sampel Baru (hanya divisi) --}}
        @if($panelTest->unit_type !== 'marketing' && $panelTest->status === 'draft')
        <div class="card" style="border:2px dashed #cbd5e1">
            <div class="card-body">
                <h6 class="fw-semibold mb-3">
                    <i class="bi bi-plus-circle text-success"></i>
                    Tambah Sampel Baru
                    <small class="text-muted fw-normal ms-1">(Gelas A, Gelas B, dst)</small>
                </h6>
                <form method="POST" action="{{ route('samples.store', $panelTest) }}">
                    @csrf
                    <div class="row g-2">
                        <div class="col-md-3">
                            <label class="form-label small fw-medium">Nama <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control form-control-sm" placeholder="Gelas A" required>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small fw-medium">Kode</label>
                            <input type="text" name="code" class="form-control form-control-sm" placeholder="Opsional">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small fw-medium">Keterangan</label>
                            <input type="text" name="description" class="form-control form-control-sm" placeholder="Opsional">
                        </div>
                        @if($panelTest->samples->count() > 0)
                        <div class="col-md-2">
                            <label class="form-label small fw-medium">
                                <i class="bi bi-files text-warning"></i> Salin dari
                            </label>
                            <select name="copy_from_sample_id" class="form-select form-select-sm">
                                <option value="">-- Tidak --</option>
                                @foreach($panelTest->samples as $s)
                                <option value="{{ $s->id }}">{{ $s->name }} ({{ $s->questions->count() }} soal)</option>
                                @endforeach
                            </select>
                        </div>
                        @endif
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-success btn-sm w-100">
                                <i class="bi bi-plus-lg"></i> Tambah
                            </button>
                        </div>
                    </div>
                    @if($panelTest->samples->count() > 0)
                    <div class="mt-2 p-2 rounded" style="background:#f0fdf4;border:1px solid #bbf7d0">
                        <small class="text-success">
                            <i class="bi bi-lightbulb"></i>
                            <strong>Tips:</strong> Pilih "Salin dari" untuk menyalin pertanyaan otomatis!
                        </small>
                    </div>
                    @endif
                </form>
            </div>
        </div>
        @endif


        {{-- Pertanyaan Kesimpulan (hanya divisi) --}}
        @if($panelTest->unit_type !== 'marketing')
        <div class="card mb-3" style="border-left:4px solid #8b5cf6">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h6 class="fw-semibold mb-0">
                    <i class="bi bi-list-check" style="color:#8b5cf6"></i>
                    Pertanyaan Kesimpulan
                    <span class="badge ms-1" style="font-size:11px;background:#f3f4f6;color:#6b7280">
                        Ditampilkan setelah semua sampel dinilai
                    </span>
                </h6>
                <span class="badge" style="background:#8b5cf6">
                    {{ $panelTest->generalQuestions->count() }} pertanyaan
                </span>
            </div>
            <div class="card-body">
                @forelse($panelTest->generalQuestions as $i => $q)
                <div class="d-flex gap-2 p-2 border rounded mb-2" style="background:#f5f3ff">
                    <div style="width:24px;height:24px;background:#8b5cf6;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600;flex-shrink:0;margin-top:2px">
                        {{ $i + 1 }}
                    </div>
                    <div class="flex-grow-1">
                        <div class="fw-medium small">{{ $q->question_text }}</div>
                        <div class="d-flex gap-1 mt-1 flex-wrap">
                            <span class="badge" style="background:#e2e8f0;color:#475569;font-size:10px">{{ $q->question_type }}</span>
                            @if($q->options)
                            @foreach($q->options as $opt)
                            <span class="badge bg-light text-dark" style="font-size:10px">{{ $opt }}</span>
                            @endforeach
                            @endif
                        </div>
                    </div>
                    @if($panelTest->status === 'draft')
                    <form method="POST" action="{{ route('questions.destroy', $q) }}" onsubmit="return confirm('Hapus pertanyaan ini?')">
                        @csrf @method('DELETE')
                        <button class="btn btn-sm btn-outline-danger py-0"><i class="bi bi-trash"></i></button>
                    </form>
                    @endif
                </div>
                @empty
                <p class="text-muted small text-center py-2">Belum ada pertanyaan kesimpulan</p>
                @endforelse

                @if($panelTest->status === 'draft')
                <form method="POST" action="{{ route('questions.store', $panelTest) }}" class="mt-3">
                    @csrf
                    <div class="row g-2">
                        <div class="col-12">
                            <textarea name="question_text" class="form-control form-control-sm" rows="2"
                                placeholder="Contoh: Dari semua sampel, mana yang paling Anda sukai?" required></textarea>
                        </div>
                        <div class="col-md-5">
                            <select name="question_type" class="form-select form-select-sm"
                                id="generalType" onchange="toggleGeneralOptions()">
                                <option value="rating">&#11088; Rating (1-5)</option>
                                <option value="text">&#128172; Teks Bebas</option>
                                <option value="yes_no">&#9989; Ya/Tidak</option>
                                <option value="multiple_choice">&#128203; Pilihan Ganda</option>
                            </select>
                        </div>
                        <div class="col-md-4" id="generalOptionsField" style="display:none">
                            <textarea name="options" class="form-control form-control-sm" rows="2"
                                placeholder="Pilihan A&#10;Pilihan B&#10;Pilihan C"></textarea>
                        </div>
                        <div class="col-md-3">
                            <button type="submit" class="btn btn-sm w-100"
                                style="background:#8b5cf6;color:#fff;border:none">
                                <i class="bi bi-plus"></i> Tambah
                            </button>
                        </div>
                    </div>
                </form>
                @endif
            </div>
        </div>
        @endif

    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    @if($panelTest->access_token)
    const publicUrl = "{{ route('public-test.show', $panelTest->access_token) }}";
    const qrDiv = document.getElementById('qrCanvas');
    if (qrDiv) {
        new QRCode(qrDiv, {
            text: publicUrl, width: 180, height: 180,
            colorDark: '#1e3a5f', colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        });
    }
    @endif
});

function copyLink() {
    const input = document.getElementById('publicLink');
    const val = input.value;
    // Fallback untuk HTTP (non-secure context)
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(val).then(() => {
            showCopied();
        }).catch(() => fallbackCopy(input));
    } else {
        fallbackCopy(input);
    }
}
function fallbackCopy(input) {
    input.focus();
    input.select();
    input.setSelectionRange(0, 99999);
    try {
        document.execCommand('copy');
        showCopied();
    } catch(e) {
        alert('Gagal menyalin. Salin manual: ' + input.value);
    }
}
function showCopied() {
    const btn = document.querySelector('[onclick="copyLink()"]');
    if (btn) {
        const icon = btn.querySelector('i');
        const orig = icon.className;
        icon.className = 'bi bi-check-lg';
        btn.classList.add('btn-success');
        btn.classList.remove('btn-outline-success');
        setTimeout(() => {
            icon.className = orig;
            btn.classList.remove('btn-success');
            btn.classList.add('btn-outline-success');
        }, 2000);
    }
}

function downloadQRPNG() {
    const qrDiv  = document.getElementById('qrCanvas');
    const canvas = qrDiv ? qrDiv.querySelector('canvas') : null;
    if (!canvas) return alert('QR Code belum siap.');
    const link    = document.createElement('a');
    link.download = 'qrcode-{{ Str::slug($panelTest->title) }}.png';
    link.href     = canvas.toDataURL('image/png');
    link.click();
}

function toggleOptions(sampleId) {
    const type  = document.getElementById('type-' + sampleId).value;
    const field = document.getElementById('options-' + sampleId);
    if (field) field.style.display = type === 'multiple_choice' ? 'block' : 'none';
}

function toggleGeneralOptions() {
    const type  = document.getElementById('generalType').value;
    const field = document.getElementById('generalOptionsField');
    if (field) field.style.display = type === 'multiple_choice' ? 'block' : 'none';
}
</script>
@endpush