@extends('layouts.app')
@section('title', 'PDF teilen & QR-Code erstellen – PDF hochladen, Link & QR | kotsch.tech')
@section('meta_description', 'PDF kostenlos hochladen, geheimen Link erhalten und QR-Code mit Logo erstellen. Mit Passwortschutz, wählbarer Ablaufzeit und automatischer Löschung. Direkt im Browser.')
@section('meta_extra')
<meta name="keywords" content="PDF teilen, PDF hochladen, PDF QR Code, PDF Link erstellen, PDF QR Code erstellen, PDF mit Passwort teilen, PDF Link mit Ablauf">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.pdf-drop {
    border: 2px dashed var(--line); border-radius: var(--radius-lg);
    background: var(--bg); padding: 44px 24px; text-align: center;
    cursor: pointer; transition: border-color .2s, background .2s;
}
.pdf-drop:hover, .pdf-drop.drag { border-color: var(--accent); background: var(--accent-soft); }
.pdf-drop i { font-size: 2.6rem; color: var(--accent); margin-bottom: 14px; }
.pdf-drop-h { font-weight: 900; font-size: 1.15rem; margin: 0 0 6px; }
.pdf-drop-s { color: var(--muted); font-size: .9rem; margin: 0; }
.pdf-file-chip {
    display: none; align-items: center; gap: 12px; margin-top: 16px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 12px 16px; text-align: left;
}
.pdf-file-chip i { font-size: 1.4rem; color: #dc2626; margin: 0; }
.pdf-file-chip .fn { font-weight: 800; font-size: .92rem; word-break: break-all; }
.pdf-file-chip .fs { color: var(--muted); font-size: .8rem; }
.pdf-file-chip button { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.1rem; }
.pdf-result { display: none; }
.pdf-qr-grid { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.pdf-qr-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; text-align: center; }
.pdf-qr-box canvas { border-radius: 8px; margin: 0 auto; }
.pdf-link-row { display: flex; gap: 8px; margin-bottom: 14px; }
.pdf-link-row input { flex: 1; }
.pdf-share-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pdf-share-btns a, .pdf-share-btns button {
    flex: 1; min-width: 120px; text-decoration: none; justify-content: center;
}
.pdf-mail-row { display: flex; gap: 8px; margin-top: 8px; }
.pdf-mail-row input { flex: 1; }
.pdf-note { font-size: .8rem; color: var(--muted); line-height: 1.55; margin-top: 14px; }
.pdf-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.pdf-toast { color: var(--accent-dark); font-weight: 800; font-size: .85rem; margin-top: 8px; min-height: 1em; }
.pdf-fs {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: #fff; flex-direction: column; align-items: center; justify-content: center;
    padding: 4vmin; gap: 18px;
}
.pdf-fs.open { display: flex; }
.pdf-fs canvas { width: min(86vw, 86vh); height: min(86vw, 86vh); border-radius: 16px; }
.pdf-fs-name { font-weight: 800; color: var(--muted); font-size: 1rem; text-align: center; word-break: break-all; }
.pdf-fs-close {
    position: fixed; top: 18px; right: 18px; width: 48px; height: 48px; border-radius: 50%;
    border: 0; background: var(--ink); color: #fff; font-size: 1.2rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
@media (max-width: 640px){ .pdf-qr-grid { grid-template-columns: 1fr; } }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-file-pdf"></i> Datei</span>
        <h1 class="tool-h1">PDF teilen &<br><span>QR-Code.</span></h1>
        <p class="tool-sub">PDF hochladen, geheimen Link &amp; QR-Code mit Logo erhalten. Mit Passwortschutz, wählbarer Ablaufzeit und automatischer Löschung – die Datei verlässt deinen Server nie über öffentliche Verzeichnisse.</p>
    </div>

    <!-- UPLOAD -->
    <div class="t-panel" id="upload-panel">
        <div class="pdf-drop" id="drop">
            <i class="fas fa-cloud-arrow-up"></i>
            <p class="pdf-drop-h">PDF hierher ziehen oder klicken</p>
            <p class="pdf-drop-s">Nur PDF · max. 25 MB</p>
            <input type="file" id="file" accept="application/pdf,.pdf" hidden>
        </div>

        <div class="pdf-file-chip" id="chip">
            <i class="fas fa-file-pdf"></i>
            <div>
                <div class="fn" id="chip-name">—</div>
                <div class="fs" id="chip-size"></div>
            </div>
            <button type="button" id="chip-clear" aria-label="Auswahl entfernen"><i class="fas fa-xmark"></i></button>
        </div>

        <div class="t-grid-2" style="margin-top:18px">
            <div class="t-field" style="margin:0">
                <label class="t-label" for="expiry">Automatisch löschen nach</label>
                <select class="t-input t-select" id="expiry">
                    <option value="1h">1 Stunde</option>
                    <option value="1d">1 Tag</option>
                    <option value="7d" selected>7 Tagen</option>
                    <option value="30d">30 Tagen</option>
                </select>
            </div>
            <div class="t-field" style="margin:0">
                <label class="t-label" for="password">Passwort (optional)</label>
                <input type="text" class="t-input" id="password" placeholder="leer = kein Passwort" autocomplete="off" maxlength="128">
            </div>
        </div>

        <button class="t-btn accent full" id="upload-btn" style="margin-top:18px" disabled>
            <i class="fas fa-link"></i> Link &amp; QR-Code erstellen
        </button>
        <div class="t-error" id="upload-error"></div>
        <p class="pdf-note">
            <i class="fas fa-shield-halved"></i>
            Deine PDF wird über einen nicht erratbaren, geheimen Link bereitgestellt und nach Ablauf automatisch und unwiderruflich gelöscht. Lade keine sensiblen Daten hoch, die nicht geteilt werden dürfen.
        </p>
    </div>

    <!-- RESULT -->
    <div class="t-panel pdf-result" id="result">
        <div class="t-panel-title"><i class="fas fa-circle-check" style="color:var(--accent)"></i> Bereit zum Teilen</div>
        <div class="pdf-qr-grid">
            <div>
                <div class="pdf-qr-box" id="qr-out"></div>
                <button class="t-btn accent full sm" id="qr-full" style="margin-top:10px">
                    <i class="fas fa-expand"></i> Vollbild
                </button>
                <button class="t-btn ghost full sm" id="qr-dl" style="margin-top:8px">
                    <i class="fas fa-download"></i> QR als PNG
                </button>
            </div>
            <div>
                <label class="t-label">Geheimer Link</label>
                <div class="pdf-link-row">
                    <input type="text" class="t-input" id="share-url" readonly>
                    <button class="t-btn sm" id="copy-btn" style="white-space:nowrap"><i class="fas fa-copy"></i> Kopieren</button>
                </div>
                <div class="pdf-share-btns">
                    <a class="t-btn ghost sm" id="view-btn" target="_blank" rel="noopener"><i class="fas fa-eye"></i> Ansehen</a>
                    <a class="t-btn ghost sm" id="dl-btn"><i class="fas fa-download"></i> Download</a>
                </div>
                <div class="pdf-share-btns" style="margin-top:8px">
                    <a class="t-btn ghost sm" id="wa-btn" target="_blank" rel="noopener"><i class="fab fa-whatsapp"></i> WhatsApp</a>
                    <a class="t-btn ghost sm" id="x-btn" target="_blank" rel="noopener"><i class="fab fa-x-twitter"></i> X</a>
                    <a class="t-btn ghost sm" id="mailto-btn"><i class="fas fa-envelope"></i> E-Mail</a>
                </div>

                <label class="t-label" style="margin-top:16px">Direkt per E-Mail senden</label>
                <div class="pdf-mail-row">
                    <input type="email" class="t-input" id="mail-to" placeholder="empfaenger@beispiel.de">
                    <button class="t-btn sm" id="mail-send" style="white-space:nowrap"><i class="fas fa-paper-plane"></i> Senden</button>
                </div>
                <input type="text" class="pdf-hp" id="mail-hp" tabindex="-1" autocomplete="off" aria-hidden="true">
                <div class="pdf-toast" id="toast"></div>
                <div class="t-info" id="expiry-info"></div>
            </div>
        </div>
        <button class="t-btn ghost full" id="new-btn" style="margin-top:18px"><i class="fas fa-plus"></i> Weitere PDF teilen</button>
    </div>
</div>
@include('tools._ads_banner')
</div>

<div class="pdf-fs" id="qr-fs" role="dialog" aria-modal="true" aria-label="QR-Code im Vollbild">
    <button class="pdf-fs-close" id="qr-fs-close" aria-label="Schließen"><i class="fas fa-xmark"></i></button>
    <div id="qr-fs-out"></div>
    <div class="pdf-fs-name" id="qr-fs-name"></div>
</div>

@include('tools._qr_logo')
<script>
const CSRF = @json(csrf_token());
// Same-Origin-Endpunkte: relativ zur aktuellen Tool-URL bilden, damit Upload/E-Mail
// sowohl auf dem Apex (/webtools/pdf-teilen) als auch auf der Subdomain
// (webtools.kotsch.tech/pdf-teilen) am selben Host landen. route('pdf.upload') würde
// die Apex-Absolut-URL einbacken → auf der Subdomain ein Cross-Host-POST, der durch
// www-Normalisierung zu GET umgeleitet wird und als „page not found" (404) endet.
const TOOL_BASE = location.pathname.replace(/^\/(de|en)(?=\/|$)/, '').replace(/\/+$/, '');
const UPLOAD_URL = TOOL_BASE + '/upload';
const EMAIL_URL = TOOL_BASE + '/email';
const MAX_BYTES = 25 * 1024 * 1024;

const fileInput = document.getElementById('file');
const drop = document.getElementById('drop');
const chip = document.getElementById('chip');
const chipName = document.getElementById('chip-name');
const chipSize = document.getElementById('chip-size');
const uploadBtn = document.getElementById('upload-btn');
const uploadError = document.getElementById('upload-error');
const result = document.getElementById('result');
const uploadPanel = document.getElementById('upload-panel');
const toast = document.getElementById('toast');
let currentToken = null, currentUrl = null, currentName = '';

function fmtSize(b) {
    if (b < 1024) return b + ' B';
    if (b < 1048576) return (b / 1024).toFixed(0) + ' KB';
    return (b / 1048576).toFixed(1) + ' MB';
}
function showError(msg) { uploadError.textContent = msg; uploadError.style.display = 'block'; }
function clearError() { uploadError.style.display = 'none'; }

function setFile(file) {
    clearError();
    if (!file) return;
    const isPdf = file.type === 'application/pdf' || /\.pdf$/i.test(file.name);
    if (!isPdf) { showError('Bitte eine PDF-Datei wählen.'); return; }
    if (file.size > MAX_BYTES) { showError('Datei zu groß (max. 25 MB).'); return; }
    chipName.textContent = file.name;
    chipSize.textContent = fmtSize(file.size);
    chip.style.display = 'flex';
    uploadBtn.disabled = false;
}

drop.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', () => setFile(fileInput.files[0]));
['dragenter', 'dragover'].forEach(e => drop.addEventListener(e, ev => { ev.preventDefault(); drop.classList.add('drag'); }));
['dragleave', 'drop'].forEach(e => drop.addEventListener(e, ev => { ev.preventDefault(); drop.classList.remove('drag'); }));
drop.addEventListener('drop', ev => {
    const f = ev.dataTransfer.files[0];
    if (f) { fileInput.files = ev.dataTransfer.files; setFile(f); }
});
document.getElementById('chip-clear').addEventListener('click', () => {
    fileInput.value = ''; chip.style.display = 'none'; uploadBtn.disabled = true; clearError();
});

uploadBtn.addEventListener('click', async () => {
    if (!fileInput.files[0]) return;
    clearError();
    uploadBtn.disabled = true;
    uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Wird hochgeladen…';

    const fd = new FormData();
    fd.append('pdf', fileInput.files[0]);
    fd.append('expiry', document.getElementById('expiry').value);
    fd.append('password', document.getElementById('password').value);

    try {
        const res = await fetch(UPLOAD_URL, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
            body: fd,
        });
        const data = await res.json();
        if (!res.ok || !data.ok) {
            const msg = data.errors ? Object.values(data.errors)[0][0] : (data.message || 'Upload fehlgeschlagen.');
            throw new Error(msg);
        }
        renderResult(data);
    } catch (e) {
        showError(e.message || 'Upload fehlgeschlagen. Bitte erneut versuchen.');
        uploadBtn.disabled = false;
    } finally {
        uploadBtn.innerHTML = '<i class="fas fa-link"></i> Link & QR-Code erstellen';
    }
});

function renderResult(data) {
    currentToken = data.token;
    currentUrl = data.url;
    currentName = data.name;
    const url = data.url;
    document.getElementById('share-url').value = url;
    document.getElementById('view-btn').href = url;
    document.getElementById('dl-btn').href = url + '/download';
    const shareText = 'PDF "' + data.name + '" ansehen: ';
    document.getElementById('wa-btn').href = 'https://wa.me/?text=' + encodeURIComponent(shareText + url);
    document.getElementById('x-btn').href = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(shareText) + '&url=' + encodeURIComponent(url);
    document.getElementById('mailto-btn').href = 'mailto:?subject=' + encodeURIComponent('PDF: ' + data.name) + '&body=' + encodeURIComponent(shareText + url);

    let info = 'Wird automatisch gelöscht am ' + data.expires_human + ' Uhr.';
    if (data.protected) info += ' · Passwortgeschützt.';
    document.getElementById('expiry-info').textContent = info;

    const out = document.getElementById('qr-out');
    KTQr.render({ text: url, size: 200, logo: true }).then(c => { out.innerHTML = ''; out.appendChild(c); });

    uploadPanel.style.display = 'none';
    result.style.display = 'block';
    result.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

document.getElementById('qr-dl').addEventListener('click', () => {
    const c = document.querySelector('#qr-out canvas');
    KTQr.download(c, 'kotsch-tech-qr.png');
});

// Vollbild-QR
const fs = document.getElementById('qr-fs');
const fsOut = document.getElementById('qr-fs-out');
function openFullscreen() {
    if (!currentUrl) return;
    document.getElementById('qr-fs-name').textContent = currentName;
    fsOut.innerHTML = '<div style="padding:40px;color:#94a3b8">QR wird erzeugt…</div>';
    fs.classList.add('open');
    document.body.style.overflow = 'hidden';
    KTQr.render({ text: currentUrl, size: 1000, logo: true }).then(c => { fsOut.innerHTML = ''; fsOut.appendChild(c); });
}
function closeFullscreen() { fs.classList.remove('open'); document.body.style.overflow = ''; }
document.getElementById('qr-full').addEventListener('click', openFullscreen);
document.getElementById('qr-fs-close').addEventListener('click', closeFullscreen);
fs.addEventListener('click', e => { if (e.target === fs) closeFullscreen(); });
document.addEventListener('keydown', e => { if (e.key === 'Escape' && fs.classList.contains('open')) closeFullscreen(); });
document.getElementById('copy-btn').addEventListener('click', async () => {
    try { await navigator.clipboard.writeText(document.getElementById('share-url').value); flash('Link kopiert!'); }
    catch { flash('Kopieren nicht möglich.'); }
});
function flash(msg) { toast.textContent = msg; setTimeout(() => { toast.textContent = ''; }, 2500); }

document.getElementById('mail-send').addEventListener('click', async () => {
    const to = document.getElementById('mail-to').value.trim();
    if (!to) { flash('Bitte E-Mail-Adresse eingeben.'); return; }
    const btn = document.getElementById('mail-send');
    btn.disabled = true;
    try {
        let qrData = null;
        try {
            const qrCanvas = await KTQr.render({ text: currentUrl, size: 600, logo: true });
            qrData = qrCanvas.toDataURL('image/png');
        } catch (_) { /* Mail wird auch ohne QR-Bild gesendet */ }
        const res = await fetch(EMAIL_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
            body: JSON.stringify({ token: currentToken, to: to, website: document.getElementById('mail-hp').value, qr: qrData }),
        });
        const data = await res.json();
        flash(data.ok ? 'E-Mail gesendet!' : (data.message || 'Senden fehlgeschlagen.'));
        if (data.ok) document.getElementById('mail-to').value = '';
    } catch { flash('Senden fehlgeschlagen.'); }
    finally { btn.disabled = false; }
});

document.getElementById('new-btn').addEventListener('click', () => {
    fileInput.value = ''; chip.style.display = 'none'; uploadBtn.disabled = true;
    document.getElementById('password').value = '';
    result.style.display = 'none'; uploadPanel.style.display = 'block';
    uploadPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
</script>

@include('tools._seo_content', ['toolSlug' => 'pdf-teilen', 'toolName' => 'PDF teilen & QR-Code'])

@endsection