@extends('layouts.app')

@section('title', 'Create Reward Cycle')

@push('styles')
<style>
    .form-card { background:#fff;border:1px solid var(--gray-200);border-radius:14px;overflow:hidden;max-width:600px; }
    .form-card-header { padding:1.1rem 1.5rem;border-bottom:1px solid var(--gray-100); }
    .form-card-header h2 { font-size:.95rem;font-weight:700;color:var(--gray-900); }
    .form-body { padding:1.5rem; }

    .form-group { margin-bottom:1.25rem; }
    .form-label { display:block;font-size:.8rem;font-weight:700;color:var(--gray-700);margin-bottom:.4rem; }
    .form-label .req { color:#ef4444; }
    .form-control {
        width:100%;padding:.6rem .85rem;
        border:1.5px solid var(--gray-200);border-radius:8px;
        font-size:.875rem;color:var(--gray-800);background:#fff;
        transition:border-color .15s;font-family:inherit;
    }
    .form-control:focus { outline:none;border-color:var(--green); }
    .form-control.is-invalid { border-color:#ef4444; }
    .invalid-feedback { font-size:.75rem;color:#ef4444;margin-top:.3rem; }
    .form-hint { font-size:.75rem;color:var(--gray-400);margin-top:.3rem; }

    .form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }

    .info-box { background:var(--green-light);border:1px solid #bbf7d0;border-radius:10px;padding:.85rem 1rem;margin-bottom:1.25rem;font-size:.82rem;color:#166534;display:flex;gap:.6rem;align-items:flex-start; }
    .info-box i { flex-shrink:0;margin-top:.1rem; }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">New Reward Cycle</h1>
        <p class="page-subtitle">Define a new 15-day feedback collection period.</p>
    </div>
    <a href="{{ route('admin.rewards.index') }}" class="btn-secondary">
        <i class="fas fa-arrow-left"></i> Back
    </a>
</div>

<div class="form-card">
    <div class="form-card-header">
        <h2><i class="fas fa-rotate" style="color:var(--green);margin-right:.4rem;"></i> Create Cycle</h2>
    </div>
    <div class="form-body">

        <div class="info-box">
            <i class="fas fa-info-circle"></i>
            <span>Only one cycle can be active at a time. Creating a new cycle will fail if there is already an active one — close the current cycle first.</span>
        </div>

        <form method="POST" action="{{ route('admin.rewards.store') }}">
            @csrf

            <div class="form-group">
                <label class="form-label">Cycle Name <span class="req">*</span></label>
                <input type="text" name="name" class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}"
                    placeholder="e.g. June 2026 Cycle 1"
                    value="{{ old('name') }}" required maxlength="100">
                @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                <div class="form-hint">A descriptive name for this reward period.</div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Start Date <span class="req">*</span></label>
                    <input type="date" name="start_date" class="form-control {{ $errors->has('start_date') ? 'is-invalid' : '' }}"
                        value="{{ old('start_date', now()->toDateString()) }}" required>
                    @error('start_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="form-group">
                    <label class="form-label">End Date <span class="req">*</span></label>
                    <input type="date" name="end_date" id="endDate" class="form-control {{ $errors->has('end_date') ? 'is-invalid' : '' }}"
                        value="{{ old('end_date', now()->addDays(15)->toDateString()) }}" required>
                    @error('end_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>

            <div style="display:flex;gap:.75rem;margin-top:1.5rem;">
                <button type="submit" class="btn-primary" style="padding:.65rem 1.5rem;">
                    <i class="fas fa-plus-circle"></i> Create Cycle
                </button>
                <a href="{{ route('admin.rewards.index') }}" class="btn-secondary" style="padding:.65rem 1.5rem;">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>

@endsection