@extends('layouts.app')

@section('title', 'Reward Cycles')

@push('styles')
<style>
    .page-card { background:#fff;border:1px solid var(--gray-200);border-radius:14px;overflow:hidden; }
    .page-card-header { padding:1.1rem 1.5rem;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between; }
    .page-card-header h2 { font-size:.95rem;font-weight:700;color:var(--gray-900); }

    table.cycles-table { width:100%;border-collapse:collapse; }
    .cycles-table th { padding:.65rem 1.25rem;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; }
    .cycles-table td { padding:.9rem 1.25rem;font-size:.875rem;color:var(--gray-700);border-bottom:1px solid var(--gray-100);vertical-align:middle; }
    .cycles-table tr:last-child td { border-bottom:none; }
    .cycles-table tr:hover td { background:var(--gray-50); }

    .status-badge { display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .65rem;border-radius:20px;font-size:.72rem;font-weight:700; }
    .status-active { background:#dcfce7;color:#166534; }
    .status-closed { background:var(--gray-100);color:var(--gray-600); }
    .active-dot { width:6px;height:6px;border-radius:50%;background:#00a651;animation:pulse 1.5s infinite; }
    @keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }

    .btn-sm { display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .7rem;border-radius:6px;font-size:.75rem;font-weight:600;transition:all .15s; }
    .btn-sm-green { background:var(--green);color:#fff; }
    .btn-sm-green:hover { background:var(--green-dark);color:#fff; }
    .btn-sm-ghost { background:transparent;color:var(--gray-600);border:1.5px solid var(--gray-200); }
    .btn-sm-ghost:hover { border-color:var(--green);color:var(--green); }

    .pagination-wrap { padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--gray-100);font-size:.8rem;color:var(--gray-500);flex-wrap:wrap;gap:.5rem; }
    .empty-state { text-align:center;padding:3rem;color:var(--gray-400); }
    .empty-state i { font-size:2.5rem;margin-bottom:.75rem;display:block; }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Reward Cycles</h1>
        <p class="page-subtitle">Manage 15-day feedback reward cycles.</p>
    </div>
    <a href="{{ route('admin.rewards.create') }}" class="btn-primary">
        <i class="fas fa-plus"></i> New Cycle
    </a>
</div>

<div class="page-card">
    <div class="page-card-header">
        <h2>All Cycles</h2>
        <span style="font-size:.78rem;color:var(--gray-500);">{{ $cycles->total() }} cycle{{ $cycles->total() !== 1 ? 's' : '' }}</span>
    </div>

    @if($cycles->count())
    <table class="cycles-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>Duration</th>
                <th>Status</th>
                <th>Created By</th>
                <th>Created</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach($cycles as $cycle)
            <tr>
                <td style="font-weight:600;color:var(--gray-900);">{{ $cycle->name }}</td>
                <td>{{ $cycle->start_date->format('d M Y') }}</td>
                <td>{{ $cycle->end_date->format('d M Y') }}</td>
                <td style="font-size:.8rem;color:var(--gray-500);">
                    {{ $cycle->start_date->diffInDays($cycle->end_date) }} days
                </td>
                <td>
                    @if($cycle->status === 'active')
                        <span class="status-badge status-active">
                            <span class="active-dot"></span> Active
                        </span>
                    @else
                        <span class="status-badge status-closed">
                            <i class="fas fa-lock" style="font-size:.65rem;"></i> Closed
                        </span>
                    @endif
                </td>
                <td style="font-size:.82rem;">{{ $cycle->createdBy?->name ?? '—' }}</td>
                <td style="font-size:.78rem;color:var(--gray-400);">{{ $cycle->created_at->format('d M Y') }}</td>
                <td>
                    <div style="display:flex;gap:.4rem;">
                        <a href="{{ route('admin.rewards.leaderboard', $cycle) }}" class="btn-sm btn-sm-ghost" title="Cycle Leaderboard">
                            <i class="fas fa-trophy"></i>
                        </a>
                        <a href="{{ route('admin.rewards.show', $cycle) }}" class="btn-sm btn-sm-green">
                            <i class="fas fa-eye"></i> View
                        </a>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    @if($cycles->hasPages())
    <div class="pagination-wrap">
        <span>Showing {{ $cycles->firstItem() }}–{{ $cycles->lastItem() }} of {{ $cycles->total() }}</span>
        {{ $cycles->links() }}
    </div>
    @endif

    @else
    <div class="empty-state">
        <i class="fas fa-rotate"></i>
        <p>No reward cycles yet. <a href="{{ route('admin.rewards.create') }}" style="color:var(--green);font-weight:600;">Create the first one.</a></p>
    </div>
    @endif
</div>

@endsection