@extends('layouts.admin', ['title' => 'Cohorts — ' . ($program->name ?? 'Program'), 'currentPage' => 'programs', 'breadcrumbs' => [
    ['title' => 'Programs', 'url' => route('admin.programs')],
    ['title' => $program->name ?? 'Program', 'url' => null],
    ['title' => 'Cohorts', 'url' => null],
]])

@section('content')
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-3xl font-bold text-white mb-2">{{ $program->name }} — Cohorts</h2>
                <p class="text-blue-100">Manage cohorts and view their courses</p>
            </div>
            <div class="flex items-center space-x-3">
                <button class="bg-gradient-to-r from-blue-600 to-blue-800 text-white px-4 py-2 rounded-lg font-medium hover:from-blue-700 hover:to-blue-900 transition-all">Add Cohort</button>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-lg p-6">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-3">
                <input id="selectAll" type="checkbox" class="w-4 h-4">
                <label for="selectAll" class="text-sm text-gray-700">Select all</label>
            </div>
            <div class="flex items-center gap-2">
                <button id="btnBatchArchive" class="px-3 py-2 text-sm border rounded-lg hover:bg-gray-50">Archive selected</button>
                <button id="btnBatchUnarchive" class="px-3 py-2 text-sm border rounded-lg hover:bg-gray-50">Unarchive selected</button>
            </div>
        </div>

        @php
            $active = $cohorts->where('is_archived', false);
            $archived = $cohorts->where('is_archived', true);
        @endphp

        <h3 class="text-sm font-semibold text-gray-700 mb-2">Active Cohorts</h3>
        <ul class="divide-y divide-gray-200 mb-6" id="listActive">
            @foreach($active as $cohort)
                <li class="py-3 flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <input type="checkbox" class="w-4 h-4 cohortChk" value="{{ $cohort->id }}">
                        <div>
                            <div class="font-medium text-gray-800">{{ $cohort->name }} {{ $cohort->year ? '(' . $cohort->year . ')' : '' }}</div>
                            <div class="text-sm text-gray-500">Courses: {{ $cohort->courses()->where('is_archived', false)->count() }} <span class="ml-2 text-xs text-gray-400">(Archived: {{ $cohort->courses()->where('is_archived', true)->count() }})</span></div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <a href="{{ route('admin.cohort.courses', $cohort) }}" class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">View Courses</a>
                        <button type="button" onclick="toggleCohortArchive({{ $cohort->id }}, false)" class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-gray-700">Archive</button>
                    </div>
                </li>
            @endforeach
        </ul>

        <details class="group">
            <summary class="cursor-pointer text-sm font-semibold text-gray-700">Archived Cohorts ({{ $archived->count() }})</summary>
            <ul class="mt-2 divide-y divide-gray-200" id="listArchived">
                @foreach($archived as $cohort)
                    <li class="py-3 flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <input type="checkbox" class="w-4 h-4 cohortChk" value="{{ $cohort->id }}">
                            <div>
                                <div class="font-medium text-gray-800">{{ $cohort->name }} {{ $cohort->year ? '(' . $cohort->year . ')' : '' }}</div>
                                <div class="text-sm text-gray-500">Courses: {{ $cohort->courses()->where('is_archived', false)->count() }} <span class="ml-2 text-xs text-gray-400">(Archived: {{ $cohort->courses()->where('is_archived', true)->count() }})</span></div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <a href="{{ route('admin.cohort.courses', $cohort) }}" class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">View Courses</a>
                            <button type="button" onclick="toggleCohortArchive({{ $cohort->id }}, true)" class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 text-gray-700">Unarchive</button>
                        </div>
                    </li>
                @endforeach
            </ul>
        </details>
    </div>

    <script>
        function toggleCohortArchive(id, isArchived){
            const url = isArchived ? `/admin/cohort/${id}/unarchive` : `/admin/cohort/${id}/archive`;
            fetch(url, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                credentials: 'same-origin'
            }).then(()=> window.location.reload())
              .catch(()=> alert('Failed to update cohort state'));
        }

        document.getElementById('selectAll').addEventListener('change', function(){
            document.querySelectorAll('.cohortChk').forEach(chk => chk.checked = this.checked);
        });
        document.getElementById('btnBatchArchive').addEventListener('click', ()=>batchToggle(false));
        document.getElementById('btnBatchUnarchive').addEventListener('click', ()=>batchToggle(true));
        function batchToggle(isArchived){
            const ids = Array.from(document.querySelectorAll('.cohortChk:checked')).map(i=>i.value);
            if (!ids.length) { alert('Select cohorts first'); return; }
            Promise.all(ids.map(id=>{
                const url = isArchived ? `/admin/cohort/${id}/unarchive` : `/admin/cohort/${id}/archive`;
                return fetch(url, { method:'POST', headers:{'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')}, credentials:'same-origin' });
            })).then(()=> window.location.reload()).catch(()=> alert('Batch update failed'));
        }
    </script>
@endsection