@extends('layouts.app')

@section('title', 'Campaigns')

@section('content')
<h1>Campaigns</h1>
<p style="margin-bottom:16px;">
    <a href="{{ route('campaigns.create') }}" style="padding:8px 16px; background:var(--m3-primary); color:var(--m3-on-primary); border-radius:8px; text-decoration:none;">New campaign</a>
    <a href="{{ route('campaigns.export', request()->only('status', 'sort')) }}" style="margin-left:8px; padding:8px 16px; background:var(--m3-surface-variant); color:var(--m3-on-surface); border-radius:8px; text-decoration:none;">Export CSV</a>
    <span style="margin-left:12px;">Filter: <a href="{{ route('campaigns.index') }}" style="padding:4px 10px; border-radius:20px; background:{{ request('status') === null ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === null ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">All</a>
    <a href="{{ route('campaigns.index', ['status' => 'draft']) }}" style="margin-left:4px; padding:4px 10px; border-radius:20px; background:{{ request('status') === 'draft' ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === 'draft' ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">Draft</a>
    <a href="{{ route('campaigns.index', ['status' => 'scheduled']) }}" style="margin-left:4px; padding:4px 10px; border-radius:20px; background:{{ request('status') === 'scheduled' ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === 'scheduled' ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">Scheduled</a>
    <a href="{{ route('campaigns.index', ['status' => 'published']) }}" style="margin-left:4px; padding:4px 10px; border-radius:20px; background:{{ request('status') === 'published' ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === 'published' ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">Published</a>
    <a href="{{ route('campaigns.index', ['status' => 'failed']) }}" style="margin-left:4px; padding:4px 10px; border-radius:20px; background:{{ request('status') === 'failed' ? 'var(--m3-primary)' : 'var(--m3-surface-variant)' }}; color:{{ request('status') === 'failed' ? 'var(--m3-on-primary)' : 'var(--m3-on-surface)' }}; text-decoration:none;">Failed</a></span>
    <span style="margin-left:8px;">Sort: <a href="{{ route('campaigns.index', array_merge(request()->only('status'), ['sort' => 'created_desc'])) }}" style="padding:4px 8px; border-radius:6px; {{ request('sort', 'created_desc') === 'created_desc' ? 'background:var(--m3-primary); color:var(--m3-on-primary);' : '' }} text-decoration:none;">Newest</a> <a href="{{ route('campaigns.index', array_merge(request()->only('status'), ['sort' => 'created_asc'])) }}" style="padding:4px 8px; border-radius:6px; {{ request('sort') === 'created_asc' ? 'background:var(--m3-primary); color:var(--m3-on-primary);' : '' }} text-decoration:none;">Oldest</a> <a href="{{ route('campaigns.index', array_merge(request()->only('status'), ['sort' => 'platform_asc'])) }}" style="padding:4px 8px; border-radius:6px; {{ request('sort') === 'platform_asc' ? 'background:var(--m3-primary); color:var(--m3-on-primary);' : '' }} text-decoration:none;">Platform</a></span>
</p>
<div class="card">
    <h2>Social campaigns</h2>
    <form method="post" action="{{ route('campaigns.bulk-destroy') }}" id="bulk-form">
        @csrf
        <p style="margin-bottom:12px;">
            <button type="submit" form="bulk-form" onclick="var n = document.querySelectorAll('#bulk-form .row-select:checked').length; if (n === 0) { alert('Please select at least one campaign.'); return false; } return confirm('Delete selected campaigns?');" style="padding:6px 12px; border-radius:8px; background:var(--m3-surface-variant); border:1px solid var(--m3-outline); cursor:pointer;">Delete selected</button>
        </p>
    <div class="table-wrap">
        <table class="data-table">
            <thead>
                <tr>
                    <th style="width:36px;"><input type="checkbox" id="select-all" aria-label="Select all"></th>
                    <th>Platform</th>
                    <th>Publish to</th>
                    <th>Scheduled</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($campaigns as $c)
                    <tr>
                        <td data-label=""><input type="checkbox" name="ids[]" value="{{ $c->id }}" form="bulk-form" class="row-select"></td>
                        <td data-label="Platform">{{ $c->platform }}</td>
                        <td data-label="Publish to">{{ $c->socialAccount ? ucfirst($c->socialAccount->platform) . ($c->socialAccount->account_id ? ' (' . $c->socialAccount->account_id . ')' : '') : '—' }}</td>
                        <td data-label="Scheduled">{{ $c->scheduled_at?->format('M j, Y H:i') ?? '—' }}</td>
                        <td data-label="Status">{{ $c->status }}</td>
                        <td data-label="Created">{{ $c->created_at->format('M j, Y') }}</td>
                        <td data-label="Actions">
                            <a href="{{ route('campaigns.edit', $c) }}" style="margin-right:8px;">Edit</a>
                            <form method="post" action="{{ route('campaigns.destroy', $c) }}" style="display:inline;" onsubmit="return confirm('Delete this campaign?');">@csrf @method('DELETE')<button type="submit" style="background:none;border:none;color:var(--m3-primary);cursor:pointer;padding:0;text-decoration:underline;">Delete</button></form>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="empty-state">No campaigns yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    </form>
    @if($campaigns->hasPages())
        <div class="pagination">{{ $campaigns->links() }}</div>
    @endif
</div>
<script>
document.getElementById('select-all')?.addEventListener('change', function() {
    document.querySelectorAll('.row-select').forEach(function(cb) { cb.checked = this.checked; }.bind(this));
});
</script>
@endsection