{{-- resources/views/components/training-center/programs.blade.php --}}
@props(['programs'])

<div class="step-header text-center">
    <h2 class="step-title">Training Programs</h2>
    <p class="step-subtitle">Select programs you wish to offer</p>
</div>

<div class="mb-3">
    <label class="form-label">Programs Interested in Offering <span class="text-danger">*</span></label>
    <div class="row">
        @if(isset($programs) && is_array($programs))
        @foreach($programs as $program)
        <div class="col-12">
            <div class="program-selected card card-body">
                <div class="fw-bold">{{ $program['name'] ?? 'Program Name' }}</div>
                <small class="text-muted">
                    <i class="far fa-clock"></i> {{ $program['duration'] ?? '0' }} Hours |
                    <i class="fas fa-signal"></i> {{ $program['level'] ?? 'Level' }}
                </small>
            </div>
        </div>
        @endforeach
        @else
        <div class="col-12">
            <div class="program-selected card card-body">
                <div class="fw-bold">Caregiver for Elderly - Basic</div>
                <small class="text-muted">
                    <i class="far fa-clock"></i> 120 Hours |
                    <i class="fas fa-signal"></i> Beginner Level
                </small>
            </div>
        </div>

        <div class="col-12">
            <div class="program-selected card card-body">
                <div class="fw-bold">Caregiver for Elderly - Advanced</div>
                <small class="text-muted">
                    <i class="far fa-clock"></i> 240 Hours |
                    <i class="fas fa-signal"></i> Advanced Level
                </small>
            </div>
        </div>

        <div class="col-12">
            <div class="program-selected card card-body">
                <div class="fw-bold">Home Health Aide</div>
                <small class="text-muted">
                    <i class="far fa-clock"></i> 180 Hours |
                    <i class="fas fa-signal"></i> Intermediate Level
                </small>
            </div>
        </div>
        @endif
    </div>
</div>