<?php
$pageTitle = 'Responses: ' . $form['name'];
$currentPage = 'forms';
$breadcrumb = [['label'=>'Forms','url'=>url('/forms')],['label'=>e($form['name']),'url'=>url('/forms/'.$form['id'].'/edit')],['label'=>'Responses']];
$headerActions = '<a href="'.url('/forms/'.$form['id'].'/responses/export').'" class="btn-secondary btn-sm"><i class="fas fa-download"></i> Export CSV</a><a href="'.url('/forms/'.$form['id'].'/edit').'" class="btn-secondary btn-sm"><i class="fas fa-edit"></i> Edit Form</a>';
require_once APP_PATH . '/views/layouts/header.php';
?>

<?php if (empty($responses)): ?>
<div class="card" style="padding:4rem;text-align:center;max-width:480px;margin:0 auto">
    <div style="width:64px;height:64px;background:#d1fae5;border-radius:1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem">
        <i class="fas fa-inbox" style="font-size:1.75rem;color:#059669"></i>
    </div>
    <h2 style="font-weight:800;font-size:1.25rem;color:#111827;margin:0 0 .5rem">No Responses Yet</h2>
    <p style="color:#6b7280;font-size:.875rem;margin:0 0 1.5rem">Share your form link to start collecting responses.</p>
    <button onclick="copyToClipboard('<?= url('/form/'.$form['slug']) ?>')" class="btn-primary"><i class="fas fa-link"></i> Copy Form Link</button>
</div>
<?php else: ?>

<!-- Stats Bar -->
<div style="display:flex;gap:1.25rem;margin-bottom:1.25rem">
    <div class="card" style="padding:1rem 1.5rem;display:flex;align-items:center;gap:.75rem">
        <span style="font-size:1.5rem;font-weight:800;color:#111827"><?= count($responses) ?></span>
        <span style="font-size:.8rem;color:#6b7280;font-weight:500">Total Responses</span>
    </div>
    <div class="card" style="padding:1rem 1.5rem;display:flex;align-items:center;gap:.75rem">
        <span style="font-size:1.5rem;font-weight:800;color:#111827"><?= count($fields) ?></span>
        <span style="font-size:.8rem;color:#6b7280;font-weight:500">Fields</span>
    </div>
</div>

<!-- Table -->
<div class="card" style="overflow:hidden">
    <div style="overflow-x:auto">
        <table style="width:100%;border-collapse:collapse;font-size:.8rem">
            <thead>
                <tr style="background:#f9fafb;border-bottom:1px solid #f3f4f6">
                    <th style="padding:.875rem 1rem;text-align:left;font-size:.65rem;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap">#</th>
                    <th style="padding:.875rem 1rem;text-align:left;font-size:.65rem;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap">Date</th>
                    <?php foreach ($fields as $f): ?>
                    <th style="padding:.875rem 1rem;text-align:left;font-size:.65rem;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;max-width:180px"><?= e($f['label']) ?></th>
                    <?php endforeach; ?>
                    <th style="padding:.875rem 1rem;text-align:center;font-size:.65rem;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.05em">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($responses as $i => $response): ?>
                <?php
                $valueMap = [];
                foreach ($response['values'] as $v) { $valueMap[$v['field_id']] = $v; }
                ?>
                <tr style="border-bottom:1px solid #f9fafb;transition:background .1s" onmouseover="this.style.background='#f9fafb'" onmouseout="this.style.background=''" id="response-row-<?= $response['id'] ?>">
                    <td style="padding:.875rem 1rem;color:#9ca3af;font-size:.75rem;white-space:nowrap"><?= $i + 1 ?></td>
                    <td style="padding:.875rem 1rem;white-space:nowrap">
                        <div style="font-weight:600;color:#111827;font-size:.8rem"><?= date('d M Y', strtotime($response['created_at'])) ?></div>
                        <div style="color:#9ca3af;font-size:.65rem"><?= date('H:i', strtotime($response['created_at'])) ?></div>
                    </td>
                    <?php foreach ($fields as $f): ?>
                    <td style="padding:.875rem 1rem;max-width:200px">
                        <?php $val = $valueMap[$f['id']] ?? null; ?>
                        <?php if ($val): ?>
                            <?php if ($f['field_type'] === 'image'): ?>
                                <?php if (!empty($val['value'])): ?>
                                <a href="<?= uploadUrl($val['value']) ?>" target="_blank" style="display:inline-block">
                                    <img src="<?= uploadUrl($val['value']) ?>" alt="uploaded" style="width:48px;height:48px;object-fit:cover;border-radius:.5rem;border:1px solid #e5e7eb">
                                </a>
                                <?php else: ?><span style="color:#d1d5db">—</span><?php endif; ?>
                            <?php elseif ($f['field_type'] === 'file'): ?>
                                <?php if (!empty($val['value'])): ?>
                                <a href="<?= uploadUrl($val['value']) ?>" target="_blank" style="color:#4f46e5;text-decoration:none;font-size:.75rem"><i class="fas fa-paperclip"></i> <?= e($val['value']) ?></a>
                                <?php else: ?><span style="color:#d1d5db">—</span><?php endif; ?>
                            <?php else: ?>
                                <span style="color:#111827;overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:180px" title="<?= e($val['value']) ?>"><?= e($val['value']) ?: '<span style="color:#d1d5db">—</span>' ?></span>
                            <?php endif; ?>
                        <?php else: ?>
                            <span style="color:#d1d5db">—</span>
                        <?php endif; ?>
                    </td>
                    <?php endforeach; ?>
                    <td style="padding:.875rem 1rem;text-align:center">
                        <button onclick="deleteResponse(<?= $response['id'] ?>)" style="background:none;border:none;cursor:pointer;color:#d1d5db;padding:.375rem;transition:color .15s" title="Delete" onmouseover="this.style.color='#ef4444'" onmouseout="this.style.color='#d1d5db'">
                            <i class="fas fa-trash" style="font-size:.85rem"></i>
                        </button>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endif; ?>

<script>
async function deleteResponse(id) {
    confirmDelete('Delete this response?', async function() {
        var res = await apiPost('/responses/' + id + '/delete', {});
        if (res.success) { document.getElementById('response-row-' + id).remove(); showToast(res.message, 'success'); }
        else showToast(res.message || 'Error', 'error');
    });
}
</script>

<?php require_once APP_PATH . '/views/layouts/footer.php'; ?>
