@extends('layouts.app')

@section('title', 'Admin — Forms')

@section('content')
<div class="content-header">
    <div>
        <h1>Forms Management</h1>
        <p class="text-secondary">{{ $forms->total() }} forms across all projects</p>
    </div>
    @can('create_form')
    <a href="{{ route('form-builder.create') }}" class="btn btn-primary">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
        New Form
    </a>
    @endcan
</div>

{{-- Analytics Cards --}}
<div class="report-cards" style="margin-bottom:24px;">
    <div class="report-card">
        <div class="report-card-icon" style="background:rgba(99,102,241,0.12); color:#6366f1;">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="9" x2="15" y2="9"/><line x1="9" y1="13" x2="15" y2="13"/></svg>
        </div>
        <div class="report-card-content">
            <div class="report-card-value">{{ $totalForms }}</div>
            <div class="report-card-label">Total Forms</div>
        </div>
    </div>
    <div class="report-card">
        <div class="report-card-icon" style="background:rgba(34,197,94,0.12); color:#22c55e;">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
        </div>
        <div class="report-card-content">
            <div class="report-card-value">{{ $activeForms }}</div>
            <div class="report-card-label">Active Forms</div>
        </div>
    </div>
    <div class="report-card">
        <div class="report-card-icon" style="background:rgba(59,130,246,0.12); color:#3b82f6;">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
        </div>
        <div class="report-card-content">
            <div class="report-card-value">{{ $totalSubmissions }}</div>
            <div class="report-card-label">Total Submissions</div>
        </div>
    </div>
    <div class="report-card">
        <div class="report-card-icon" style="background:rgba(245,158,11,0.12); color:#f59e0b;">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        </div>
        <div class="report-card-content">
            <div class="report-card-value">{{ $slaBreach }}%</div>
            <div class="report-card-label">SLA Breach Rate</div>
        </div>
    </div>
</div>

<div class="table-container">
    <table class="data-table">
        <thead>
            <tr>
                <th>Form</th>
                <th>Creator</th>
                <th>Project</th>
                <th>Submissions</th>
                <th>Status</th>
                <th>Public</th>
                <th>Created</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach($forms as $form)
            <tr>
                <td>
                    <a href="{{ route('form-builder.edit', $form) }}" class="text-link" style="font-weight:600;">{{ $form->title }}</a>
                    @if($form->template_category)
                    <span class="td-section-count">{{ $form->template_category }}</span>
                    @endif
                </td>
                <td>{{ $form->creator?->name ?? '—' }}</td>
                <td>{{ $form->project?->name ?? '—' }}</td>
                <td>{{ $form->submissions_count }}</td>
                <td>
                    <span class="status-badge {{ $form->is_active ? 'active' : 'inactive' }}">
                        {{ $form->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </td>
                <td>
                    @if($form->is_public)
                    <span style="color:#22c55e;">✓</span>
                    @else
                    <span class="text-tertiary">—</span>
                    @endif
                </td>
                <td class="text-secondary">{{ $form->created_at->format('M d, Y') }}</td>
                <td>
                    <div style="display:flex; gap:4px;">
                        <a href="{{ route('form-builder.submissions', $form) }}" class="btn btn-ghost btn-xs">Submissions</a>
                        @can('delete_form')
                        <form action="{{ route('form-builder.destroy', $form) }}" method="POST" onsubmit="return confirm('Delete this form and all submissions?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-ghost btn-xs" style="color:var(--accent-red);">Delete</button>
                        </form>
                        @endcan
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
<div style="margin-top:16px;">{{ $forms->links() }}</div>
@endsection