@extends('layouts.app')

@section('title', 'Public Feedback Settings')

@push('styles')
<style>
    .proj-table-wrap { background:#fff;border:1px solid var(--gray-200);border-radius:14px;overflow:hidden; }
    .proj-table-header { padding:1rem 1.5rem;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between; }

    table.proj-table { width:100%;border-collapse:collapse; }
    .proj-table th { padding:.65rem 1rem;font-size:.72rem;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;background:var(--gray-50);border-bottom:1px solid var(--gray-200);text-align:left;white-space:nowrap; }
    .proj-table td { padding:.9rem 1rem;font-size:.84rem;color:var(--gray-700);border-bottom:1px solid var(--gray-100);vertical-align:middle; }
    .proj-table tr:last-child td { border-bottom:none; }
    .proj-table tr:hover td { background:var(--gray-50); }

    .toggle-btn {
        display:inline-flex;align-items:center;gap:.35rem;
        padding:.4rem .85rem;border-radius:8px;font-size:.78rem;font-weight:700;
        font-family:inherit;cursor:pointer;border:none;transition:background .15s;
    }
    .toggle-on  { background:#dcfce7;color:#166534; }
    .toggle-on:hover { background:#bbf7d0; }
    .toggle-off { background:#fee2e2;color:#991b1b; }
    .toggle-off:hover { background:#fecaca; }

    .url-box {
        display:flex;align-items:center;gap:.5rem;
        background:var(--gray-50);border:1px solid var(--gray-200);
        border-radius:8px;padding:.35rem .65rem;font-size:.75rem;
        font-family:monospace;color:var(--gray-600);max-width:340px;
    }
    .url-box span { flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .btn-copy {
        background:none;border:none;cursor:pointer;
        color:var(--gray-400);font-size:.8rem;padding:.1rem .3rem;
        transition:color .15s;flex-shrink:0;
    }
    .btn-copy:hover { color:var(--green); }

    .qr-popover {
        display:none;position:fixed;z-index:999;
        background:#fff;border:1px solid var(--gray-200);border-radius:14px;
        padding:1.25rem;box-shadow:0 10px 40px rgba(0,0,0,.15);
        text-align:center;min-width:210px;
    }
    .qr-popover.open { display:block; }
    .qr-popover h4 { font-size:.82rem;font-weight:700;color:var(--gray-800);margin-bottom:.75rem; }
    .qr-popover img { width:180px;height:180px;border-radius:8px; }
    .qr-url { font-size:.7rem;color:var(--gray-400);margin-top:.5rem;word-break:break-all; }
    .qr-dl { display:inline-block;margin-top:.6rem;font-size:.75rem;font-weight:600;color:var(--green); }
    .qr-close { position:absolute;top:.6rem;right:.75rem;background:none;border:none;cursor:pointer;font-size:.9rem;color:var(--gray-400); }

    .msg-form { display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;max-width:340px; }
    .msg-form input { flex:1;padding:.4rem .65rem;border:1.5px solid var(--gray-300);border-radius:7px;font-size:.78rem;font-family:inherit;outline:none;transition:border-color .2s; }
    .msg-form input:focus { border-color:var(--green); }
    .btn-msg { padding:.4rem .75rem;background:var(--green);color:#fff;border:none;border-radius:7px;font-size:.75rem;font-weight:700;cursor:pointer;transition:background .15s;white-space:nowrap; }
    .btn-msg:hover { background:var(--green-dark); }

    .status-badge { display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .65rem;border-radius:20px;font-size:.72rem;font-weight:700; }
    .status-on  { background:#dcfce7;color:#166534; }
    .status-off { background:#f1f5f9;color:#64748b; }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-qrcode"></i> Public Feedback Settings</h1>
        <p class="page-subtitle">Enable public feedback, view URLs, generate QR codes, and set campaign messages per project.</p>
    </div>
    <a href="{{ route('admin.settings.index') }}" class="btn-secondary">
        <i class="fas fa-sliders"></i> Platform Settings
    </a>
</div>

<div class="proj-table-wrap">
    <div class="proj-table-header">
        <span style="font-weight:600;color:var(--gray-800);">All Projects</span>
        <span style="font-size:.78rem;color:var(--gray-400);">{{ $projects->count() }} projects</span>
    </div>

    <div style="overflow-x:auto;">
        <table class="proj-table">
            <thead>
                <tr>
                    <th>Project</th>
                    <th>Status</th>
                    <th>Public URL</th>
                    <th>QR Code</th>
                    <th>Campaign Message</th>
                    <th>Toggle</th>
                </tr>
            </thead>
            <tbody>
                @foreach($projects as $project)
                @php
                    $publicUrl = route('public.feedback.project', $project->slug);
                    $qrUrl     = $publicUrl . '?source=qr';
                @endphp
                <tr>
                    <td>
                        <div style="display:flex;align-items:center;gap:.65rem;">
                            <div style="width:36px;height:36px;border-radius:9px;background:var(--green-light);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;">
                                <i class="{{ $project->icon }}"></i>
                            </div>
                            <div>
                                <div style="font-weight:700;color:var(--gray-900);">{{ $project->name }}</div>
                                <div style="font-size:.72rem;color:var(--gray-400);">{{ $project->tagline }}</div>
                            </div>
                        </div>
                    </td>
                    <td>
                        @if($project->public_feedback_enabled)
                            <span class="status-badge status-on"><i class="fas fa-globe" style="font-size:.6rem;"></i> Public</span>
                        @else
                            <span class="status-badge status-off"><i class="fas fa-lock" style="font-size:.6rem;"></i> Private</span>
                        @endif
                    </td>
                    <td>
                        @if($project->public_feedback_enabled)
                        <div class="url-box">
                            <span id="url-{{ $project->id }}">{{ $publicUrl }}</span>
                            <button class="btn-copy" onclick="copyUrl('url-{{ $project->id }}')" title="Copy URL">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        @else
                            <span style="color:var(--gray-300);font-size:.78rem;">—</span>
                        @endif
                    </td>
                    <td>
                        @if($project->public_feedback_enabled)
                        <button class="btn-secondary btn-sm" onclick="showQr('{{ $project->id }}', '{{ addslashes($project->name) }}', '{{ $qrUrl }}')" style="display:inline-flex;align-items:center;gap:.35rem;">
                            <i class="fas fa-qrcode"></i> View QR
                        </button>
                        @else
                            <span style="color:var(--gray-300);font-size:.78rem;">—</span>
                        @endif
                    </td>
                    <td>
                        <form method="POST" action="{{ route('admin.projects.campaign-message', $project) }}" class="msg-form">
                            @csrf
                            <input type="text" name="campaign_message"
                                   placeholder="Add campaign message…"
                                   value="{{ $project->campaign_message }}"
                                   maxlength="500">
                            <button type="submit" class="btn-msg">Save</button>
                        </form>
                    </td>
                    <td>
                        <form method="POST" action="{{ route('admin.projects.toggle-public', $project) }}">
                            @csrf
                            <button type="submit"
                                    class="toggle-btn {{ $project->public_feedback_enabled ? 'toggle-on' : 'toggle-off' }}">
                                @if($project->public_feedback_enabled)
                                    <i class="fas fa-toggle-on"></i> Enabled
                                @else
                                    <i class="fas fa-toggle-off"></i> Disabled
                                @endif
                            </button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

{{-- QR Popover (shared) --}}
<div class="qr-popover" id="qrPopover">
    <button class="qr-close" onclick="closeQr()"><i class="fas fa-xmark"></i></button>
    <h4 id="qrTitle">QR Code</h4>
    <img id="qrImg" src="" alt="QR Code">
    <div class="qr-url" id="qrUrlText"></div>
    <a id="qrDl" href="" download="cashbaba-qr.png" class="qr-dl">
        <i class="fas fa-download"></i> Download QR
    </a>
</div>

@endsection

@push('scripts')
<script>
function copyUrl(id) {
    const text = document.getElementById(id).textContent;
    navigator.clipboard.writeText(text).then(() => {
        const btn = event.currentTarget;
        btn.innerHTML = '<i class="fas fa-check" style="color:var(--green)"></i>';
        setTimeout(() => btn.innerHTML = '<i class="fas fa-copy"></i>', 1500);
    });
}

function showQr(id, name, url) {
    const encoded = encodeURIComponent(url);
    const imgSrc  = 'https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=' + encoded;

    document.getElementById('qrTitle').textContent   = name + ' — QR Code';
    document.getElementById('qrImg').src             = imgSrc;
    document.getElementById('qrUrlText').textContent = url;
    document.getElementById('qrDl').href             = imgSrc;

    const pop = document.getElementById('qrPopover');
    pop.classList.add('open');

    // Position near clicked button
    const rect = event.currentTarget.getBoundingClientRect();
    pop.style.top  = (rect.bottom + window.scrollY + 8) + 'px';
    pop.style.left = Math.max(8, rect.left - 60) + 'px';
}

function closeQr() {
    document.getElementById('qrPopover').classList.remove('open');
}

// Close popover on outside click
document.addEventListener('click', function(e) {
    const pop = document.getElementById('qrPopover');
    if (!pop.contains(e.target) && !e.target.closest('[onclick^="showQr"]')) {
        pop.classList.remove('open');
    }
});
</script>
@endpush