@extends('layouts.app')
@section('content')

    @include('layouts.toolbar')

    @php
        use Carbon\Carbon;
        $weeksByOrder = $weeks->keyBy('order');
        $weekRangeLabel = function ($startWeek, $endWeek) use ($weeksByOrder) {
            if (!$startWeek || !$endWeek) return '—';
            $s = $weeksByOrder->get($startWeek);
            $e = $weeksByOrder->get($endWeek);
            if (!$s || !$e) return "Week $startWeek – Week $endWeek";
            $count = (int)$endWeek - (int)$startWeek + 1;
            return [
                'label' => "Week $startWeek – Week $endWeek",
                'dates' => Carbon::parse($s->start_date)->format('d M') . ' – ' . Carbon::parse($e->end_date)->format('d M'),
                'count' => $count . ' ' . ($count == 1 ? 'week' : 'weeks'),
            ];
        };
        $statusBadge = function ($status) {
            if ($status === 'current') return '<span class="status-badge st-current">Current</span>';
            if ($status === 'past') return '<span class="status-badge st-past">Closed</span>';
            if ($status === 'upcoming') return '<span class="status-badge st-upcoming">Upcoming</span>';
            return '<span class="status-badge st-empty">Not set</span>';
        };
    @endphp

    <style>
        .cycle-page { width: 100%; }
        .cycle-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 28px 16px;
        }
        .cycle-header h2 { margin: 0; font-size: 22px; font-weight: 700; color: #1f2937; }
        .cycle-header .subtitle { color: #6b7280; font-size: 13px; margin-top: 2px; }
        .cycle-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
            padding: 0 28px 24px;
        }
        @media (max-width: 992px) { .cycle-grid { grid-template-columns: 1fr; } }

        .cycle-card {
            background: #fff;
            border: 1px solid #e6e9ed;
            border-radius: 10px;
            padding: 18px 20px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .cycle-card .cc-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .cycle-card .cc-title { font-size: 16px; font-weight: 700; color: #1f2937; }
        .cycle-card .cc-week {
            background: #f8fafb;
            border-radius: 8px;
            padding: 10px 12px;
        }
        .cycle-card .cc-week-label {
            font-weight: 600;
            color: #1f2937;
            font-size: 14px;
        }
        .cycle-card .cc-week-dates { color: #6b7280; font-size: 13px; margin-top: 2px; }
        .cycle-card .cc-week-count {
            display: inline-block;
            color: #6b7280;
            font-size: 11px;
            background: #eef2f5;
            border-radius: 10px;
            padding: 2px 8px;
            margin-top: 4px;
        }
        .cycle-card .cc-invoice { display: flex; flex-direction: column; gap: 8px; }
        .cycle-card .cc-invoice-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
        }
        .cycle-card .cc-invoice-row .lbl { color: #6b7280; }
        .cycle-card .cc-invoice-row .val { font-weight: 600; color: #1f2937; }

        .status-badge {
            display: inline-block;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            padding: 2px 10px;
        }
        .st-current { background: #d1fae5; color: #065f46; }
        .st-past { background: #fee2e2; color: #991b1b; }
        .st-upcoming { background: #dbeafe; color: #1e40af; }
        .st-empty { background: #f3f4f6; color: #6b7280; }

        .transfer-section {
            margin: 0 28px 24px;
            background: #f8fafb;
            border: 1px solid #e6e9ed;
            border-radius: 10px;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .transfer-section .ts-title { font-weight: 600; color: #1f2937; }
        .transfer-section .ts-sub { color: #6b7280; font-size: 12px; margin-top: 2px; }
        .transfer-section .ts-value { font-weight: 700; color: #1f2937; font-size: 15px; }

        .empty-cycle { color: #6b7280; font-size: 13px; text-align: center; padding: 12px 0; }
    </style>

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">
            <div class="card cycle-page">
                <div class="cycle-header">
                    <div>
                        <h2>Billing cycles</h2>
                        <div class="subtitle">Enrollment year {{ $cycle->enrollment_year ?? session('enrollment_year') }}</div>
                    </div>
                    <a href="{{ route('set-cycle.edit', [encryptedId($cycle->id)]) }}" type="button" class="btn btn-success">
                        <i class="fa-solid fa-pen-to-square me-1"></i> Edit cycles
                    </a>
                </div>

                <div class="cycle-grid">
                    @foreach($cycles as $c)
                        @php $range = $weekRangeLabel($c['start_week'], $c['end_week']); @endphp
                        <div class="cycle-card">
                            <div class="cc-head">
                                <div class="cc-title">Cycle {{ $c['number'] }}</div>
                                {!! $statusBadge($c['status']) !!}
                            </div>

                            @if(!$c['start_week'] && !$c['end_week'])
                                <div class="empty-cycle">No weeks assigned</div>
                            @else
                                <div class="cc-week">
                                    @if(is_array($range))
                                        <div class="cc-week-label">{{ $range['label'] }}</div>
                                        <div class="cc-week-dates">{{ $range['dates'] }}</div>
                                        <span class="cc-week-count">{{ $range['count'] }}</span>
                                    @else
                                        <div class="cc-week-label">{{ $range }}</div>
                                    @endif
                                </div>
                            @endif

                            <div class="cc-invoice">
                                <div class="cc-invoice-row">
                                    <span class="lbl">Invoice opens</span>
                                    <span class="val">{{ $c['invoice_start'] ? Carbon::parse($c['invoice_start'])->format('d M Y') : '—' }}</span>
                                </div>
                                <div class="cc-invoice-row">
                                    <span class="lbl">Invoice due</span>
                                    <span class="val">{{ $c['invoice_end'] ? Carbon::parse($c['invoice_end'])->format('d M Y') : '—' }}</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="transfer-section">
                    <div>
                        <div class="ts-title">Transfer date</div>
                        <div class="ts-sub">Last day enrollments can be transferred between cycles</div>
                    </div>
                    <div class="ts-value">
                        {{ !empty($cycle->transfer_date) ? Carbon::parse($cycle->transfer_date)->format('d M Y') : '—' }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection