@extends('layouts.app')
@section('title','Kelola QR Code')
@section('topbar-title','QR Code Absensi Global')

@section('styles')
<style>
.qr-display-box {
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
    border: 2px solid rgba(20,184,166,.3);
    border-radius: 20px; padding: 2rem; text-align: center;
    min-height: 280px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; transition: .3s;
}
.qr-active-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(22,163,74,.12); color: #15803d;
    border-radius: 99px; padding: .3rem .9rem;
    font-size: .78rem; font-weight: 700;
    animation: pulse 2s ease infinite;
}
@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,.3); }
    50%      { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
}
.info-step {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .85rem; background: #f8fafc;
    border-radius: 12px; margin-bottom: .6rem;
    border-left: 3px solid #14b8a6;
}
.step-num {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #0d9488, #2dd4bf);
    color: white; font-size: .75rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
</style>
@endsection

@section('content')
<div class="page-header d-flex align-items-center justify-content-between flex-wrap gap-2">
    <div>
        <div class="page-title">QR Code Absensi Global</div>
        <div class="page-sub">1 QR Code berlaku untuk semua mata kuliah — sistem otomatis mendeteksi jadwal</div>
    </div>
</div>

<div class="row g-4">

    {{-- Panel Generate QR --}}
    <div class="col-lg-5">
        <div class="content-card h-100">
            <div class="content-card-header">
                <div style="width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#0d9488,#2dd4bf);display:flex;align-items:center;justify-content:center;">
                    <i class="bi bi-qr-code text-white" style="font-size:.9rem;"></i>
                </div>
                <span class="title">Generate QR Baru</span>
                <span class="ms-auto badge" style="background:rgba(239,68,68,.1);color:#dc2626;font-size:.7rem;">Hanya Admin</span>
            </div>
            <div class="content-card-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Label QR (opsional)</label>
                    <input type="text" id="qrLabel" class="form-control"
                           placeholder="Contoh: QR Semester Genap 2024/2025"
                           value="QR Absensi Global">
                    <div class="form-text">Label untuk memudahkan identifikasi QR Code</div>
                </div>

                <button id="btnGenerate" class="btn-arn w-100 justify-content-center mb-3">
                    <i class="bi bi-arrow-repeat me-2"></i>Generate QR Code Baru
                </button>

                {{-- QR Display --}}
                <div class="qr-display-box" id="qrBox">
                    @if($activeQr)
                        <div id="qrCanvas"></div>
                        <div class="qr-active-badge mt-2">
                            <i class="bi bi-circle-fill" style="font-size:.5rem;"></i> QR Aktif
                        </div>
                        <div style="font-size:.8rem;font-weight:700;color:#0a6e6e;margin-top:.5rem;">
                            {{ $activeQr->label }}
                        </div>
                        <div style="font-size:.68rem;color:#64748b;margin-top:.25rem;">
                            Dibuat: {{ $activeQr->created_at->format('d M Y, H:i') }}
                        </div>
                        <div class="d-flex gap-2 mt-2 justify-content-center flex-wrap">
                            <button class="btn btn-sm btn-outline-secondary"
                                    onclick="copyUrl('{{ url('/absensi/scan/' . $activeQr->token) }}', this)">
                                <i class="bi bi-clipboard me-1"></i>Copy URL
                            </button>
                            <button class="btn btn-sm btn-outline-primary" onclick="downloadQR()">
                                <i class="bi bi-download me-1"></i>Download QR
                            </button>
                        </div>
                    @else
                        <i class="bi bi-qr-code opacity-25" style="font-size:4rem;color:#0d9488;"></i>
                        <div style="font-size:.82rem;color:#5a7a7a;margin-top:.75rem;">
                            Belum ada QR aktif. Klik Generate untuk membuat.
                        </div>
                    @endif
                </div>

                @if($activeQr)
                <div class="mt-3 p-2 rounded-3" style="background:#f0fdfa;border:1px solid rgba(20,184,166,.2);">
                    <div style="font-size:.68rem;color:#5a7a7a;font-weight:600;margin-bottom:.2rem;">URL SCAN:</div>
                    <div style="font-size:.72rem;word-break:break-all;color:#0d9488;font-family:monospace;">
                        {{ url('/absensi/scan/' . $activeQr->token) }}
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Cara Kerja & Riwayat --}}
    <div class="col-lg-7">
        <div class="content-card mb-4">
            <div class="content-card-header">
                <i class="bi bi-info-circle-fill" style="color:#0d9488;"></i>
                <span class="title">Cara Kerja Sistem Absensi Otomatis</span>
            </div>
            <div class="content-card-body">
                <div class="info-step">
                    <div class="step-num">1</div>
                    <div>
                        <div style="font-weight:700;font-size:.88rem;">Admin Generate 1 QR Code</div>
                        <div style="font-size:.8rem;color:#5a7a7a;">QR berlaku untuk semua mata kuliah tanpa perlu diganti.</div>
                    </div>
                </div>
                <div class="info-step">
                    <div class="step-num">2</div>
                    <div>
                        <div style="font-weight:700;font-size:.88rem;">Mahasiswa Scan QR</div>
                        <div style="font-size:.8rem;color:#5a7a7a;">Scan saat jam kuliah berlangsung menggunakan kamera HP.</div>
                    </div>
                </div>
                <div class="info-step">
                    <div class="step-num">3</div>
                    <div>
                        <div style="font-weight:700;font-size:.88rem;">Sistem Deteksi Jadwal Otomatis</div>
                        <div style="font-size:.8rem;color:#5a7a7a;">
                            Sistem mencocokkan <strong>hari</strong> + <strong>jam sekarang</strong> dengan jadwal.
                        </div>
                    </div>
                </div>
                <div class="info-step" style="border-color:#dc2626;">
                    <div class="step-num" style="background:linear-gradient(135deg,#dc2626,#f87171);">4</div>
                    <div>
                        <div style="font-weight:700;font-size:.88rem;">Batas Waktu Absensi</div>
                        <div style="font-size:.8rem;color:#5a7a7a;">
                            <span style="color:#15803d;font-weight:600;">Hadir</span> — scan dalam 15 menit pertama ·
                            Lebih dari 15 menit = <span style="color:#b91c1c;font-weight:600;">Ditolak</span>.
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-card">
            <div class="content-card-header">
                <i class="bi bi-clock-history" style="color:#0d9488;"></i>
                <span class="title">Riwayat QR Code</span>
                <span class="ms-auto badge" style="background:rgba(20,184,166,.1);color:#0d9488;">{{ $qrCodes->total() }}</span>
            </div>
            <div class="table-responsive">
                <table class="table table-arn mb-0">
                    <thead>
                        <tr>
                            <th>Label</th>
                            <th>Dibuat Oleh</th>
                            <th>Tanggal</th>
                            <th>Status</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($qrCodes as $qr)
                        <tr>
                            <td style="font-weight:600;font-size:.85rem;">{{ $qr->label }}</td>
                            <td style="font-size:.82rem;">{{ $qr->creator->name ?? '-' }}</td>
                            <td style="font-size:.78rem;color:#5a7a7a;">{{ $qr->created_at->format('d/m/Y H:i') }}</td>
                            <td>
                                @if($qr->is_active)
                                    <span class="badge-hadir">Aktif</span>
                                @else
                                    <span style="background:rgba(100,116,139,.1);color:#475569;padding:.22rem .6rem;border-radius:99px;font-size:.7rem;font-weight:700;">Nonaktif</span>
                                @endif
                            </td>
                            <td>
                                <div class="d-flex gap-1">
                                    <form method="POST" action="{{ route('admin.qrcode.toggle', $qr) }}">
                                        @csrf @method('PATCH')
                                        <button type="submit"
                                                class="btn btn-sm {{ $qr->is_active ? 'btn-outline-warning' : 'btn-outline-success' }}"
                                                title="{{ $qr->is_active ? 'Nonaktifkan' : 'Aktifkan' }}">
                                            <i class="bi bi-{{ $qr->is_active ? 'pause-fill' : 'play-fill' }}"></i>
                                        </button>
                                    </form>
                                    <form method="POST" action="{{ route('admin.qrcode.destroy', $qr) }}"
                                          onsubmit="return confirm('Hapus QR ini?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger">
                                            <i class="bi bi-trash-fill"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-4 text-muted">
                                <i class="bi bi-qr-code fs-1 d-block mb-2 opacity-25"></i>
                                Belum ada QR Code. Klik Generate untuk membuat.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($qrCodes->hasPages())
            <div class="p-3 border-top">{{ $qrCodes->links() }}</div>
            @endif
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script>
var currentQrUrl = '';

@if($activeQr)
window.addEventListener('load', function () {
    currentQrUrl = '{{ url('/absensi/scan/' . $activeQr->token) }}';
    renderQr(currentQrUrl);
});
@endif

function renderQr(url) {
    var box = document.getElementById('qrCanvas');
    if (!box) return;
    box.innerHTML = '';

    // Wrapper putih agar kontras maksimal
    box.style.background = '#ffffff';
    box.style.padding    = '12px';
    box.style.borderRadius = '8px';

    new QRCode(box, {
        text: url,
        width: 260,
        height: 260,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
    });
}

function downloadQR() {
    var sourceCanvas = document.querySelector('#qrCanvas canvas');
    if (!sourceCanvas) {
        alert('QR Code belum dimuat. Tunggu sebentar lalu coba lagi.');
        return;
    }

    var size    = 600;
    var padding = 40;
    var total   = size + (padding * 2);

    var hdCanvas    = document.createElement('canvas');
    hdCanvas.width  = total;
    hdCanvas.height = total;
    var hdCtx       = hdCanvas.getContext('2d');

    hdCtx.fillStyle = '#ffffff';
    hdCtx.fillRect(0, 0, total, total);

    hdCtx.drawImage(sourceCanvas, padding, padding, size, size);

    var link      = document.createElement('a');
    link.download = 'QR-Absensi-ARN.png';
    link.href     = hdCanvas.toDataURL('image/png', 1.0);
    link.click();
}

document.getElementById('btnGenerate').addEventListener('click', function () {
    var btn   = this;
    var label = document.getElementById('qrLabel').value.trim() || 'QR Absensi Global';

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Generating...';

    fetch('{{ route("admin.qrcode.generate") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ label: label })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            currentQrUrl = data.url;
            document.getElementById('qrBox').innerHTML =
                '<div id="qrCanvas"></div>' +
                '<div class="qr-active-badge mt-2"><i class="bi bi-circle-fill" style="font-size:.5rem;"></i> QR Aktif</div>' +
                '<div style="font-size:.8rem;font-weight:700;color:#0a6e6e;margin-top:.5rem;">' + data.label + '</div>' +
                '<div class="d-flex gap-2 mt-2 justify-content-center flex-wrap">' +
                '<button class="btn btn-sm btn-outline-secondary" onclick="copyUrl(\'' + data.url + '\', this)"><i class="bi bi-clipboard me-1"></i>Copy URL</button>' +
                '<button class="btn btn-sm btn-outline-primary" onclick="downloadQR()"><i class="bi bi-download me-1"></i>Download QR</button>' +
                '</div>';
            renderQr(data.url);
            setTimeout(function() { location.reload(); }, 2000);
        }
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-arrow-repeat me-2"></i>Generate QR Code Baru';
    })
    .catch(function() {
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-arrow-repeat me-2"></i>Generate QR Code Baru';
        alert('Terjadi kesalahan. Coba lagi.');
    });
});

function copyUrl(url, btn) {
    navigator.clipboard.writeText(url).then(function() {
        var orig = btn.innerHTML;
        btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>Tersalin!';
        btn.classList.add('btn-success');
        btn.classList.remove('btn-outline-secondary');
        setTimeout(function() {
            btn.innerHTML = orig;
            btn.classList.remove('btn-success');
            btn.classList.add('btn-outline-secondary');
        }, 2000);
    });
}
</script>
@endsection