@extends("layouts.master")
@section("title", "All Programs")
<style>
    .program-list {
    list-style: none;
    padding-left: 0;
    margin: 18px 0 0;
    min-height: 190px;
}

.program-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: #1f2544;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.65);
    transition: all 0.3s ease;
}

.program-list li:hover {
    background: #ffffff;
    transform: translateX(4px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.program-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: #ffc928;
    color: #121638;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.program-category-title {
    font-size: 22px;
    font-weight: 800;
    color: #111743;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 12px;
    line-height: 1.25;
}

.program-category-title::after {
    content: "";
    width: 48px;
    height: 4px;
    background: #ffc928;
    border-radius: 20px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.program-category-description {
    font-size: 14px;
    line-height: 1.7;
    color: #5a6078;
    margin-bottom: 18px;
    max-width: 95%;
}
</style>
@section("content")
    <div class="breadcrumb-wrapper bg-cover" style="background-image: url('assets/img/inner/breadcrumb.jpg');">
        <div class="container">
            <div class="page-heading">
                <div class="breadcrumb-sub-title">
                    <h1 class="wow fadeInUp" data-wow-delay=".3s">All Programs</h1>
                </div>
                <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
                    <li><a href="{{ route("home") }}">Home</a></li>
                    <li><i class="fa-solid fa-chevron-right"></i></li>
                    <li>All Programs</li>
                </ul>
            </div>
        </div>
    </div>

    <section class="section-padding">
        <div class="container">
            <div class="section-title text-center mb-5">
                <h6 class="wow fadeInUp">{{ $categories->sum(fn($c) => $c->programs->count()) }}+ Programs</h6>
                <h2 class="wow fadeInUp" data-wow-delay=".2s">Programs for Every Career Stage</h2>
                <p class="mt-3 mx-auto wow fadeInUp" data-wow-delay=".3s" style="max-width: 760px;">
                    ICCSSL programs support learners from foundation level through diploma and postgraduate study, with
                    online learning support, practical company secretarial training, pathway options, and CPD topics for
                    continuing professional development.
                </p>
            </div>

            <div class="row g-4">
                @foreach ($categories as $index => $category)
                    @php
                        $categoryLink = match ($category->slug) {
                            "foundation-programs" => route("foundation-programs"),
                            "post-graduate-programs" => route("post-graduate-programs"),
                            "diploma-programs" => route("diploma-programs"),
                            "additional-programs" => "additional-programs",
                            default => route("program-post"),
                        };
                    @endphp
                    <div id="{{ $category->slug }}" class="col-lg-3 col-md-6 wow fadeInUp"
                        data-wow-delay=".{{ ($index + 2) * 2 }}s">
                        <div class="h-100" style="border:1px solid #e6eaf3; background:#fff;">
                            <a href="{{ $categoryLink }}" class="d-block">
                                <img src="{{ $category->banner_image ? asset('storage/' . ltrim($category->banner_image, '/')) : asset('assets/img/home-1/courses/courses-01.jpg') }}"
                                    alt="{{ $category->name }}"
                                    style="width:100%; height: 320px; object-fit:cover;">
                            </a>
                            <div class="p-4">
                                <h4 class="program-category-title">
    {{ $category->name }}
</h4>

<p class="program-category-description">
    {{ $category->description ?: "Explore the available programs in this category." }}
</p>
                                @if ($category->programs->isNotEmpty())
                                <ul class="program-list">
                                    @foreach ($category->programs->take(10) as $program)
                                        <li>
                                            <span class="program-icon">✓</span>
                                            <span>{{ $program->title }}</span>
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                                <!--@if ($category->programs->isNotEmpty())-->
                                <!--    <ul style="padding-left:18px; min-height: 190px;">-->
                                <!--        @foreach ($category->programs->take(7) as $program)-->
                                <!--            <li>{{ $program->title }}</li>-->
                                <!--        @endforeach-->
                                <!--    </ul>-->
                                <!--@endif-->
                                <a href="{{ $categoryLink }}" class="theme-btn" style="width: 100%; margin-top: 20px;">
                                    View Programs
                                    <i class="fa-solid fa-arrow-up-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="section-padding pt-0">
        <div class="container">
            <div class="row g-4 align-items-center">
                <div class="col-lg-7 wow fadeInUp" data-wow-delay=".2s">
                    <div class="p-4 p-lg-5" style="background:#f7f9fc; border-left:4px solid #f7c94e;">
                        <h3>Our Service of Excellence</h3>
                        <p class="mb-3">
                            Knowledge transfer is crucial for innovation, competitive advantage, and efficiency. ICCSSL
                            has transferred industry-focused knowledge for decades through structured programs.
                        </p>
                        <a href="{{ route("online-register") }}" class="theme-btn">
                            See How To Apply
                            <i class="fa-solid fa-arrow-up-right"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-5 wow fadeInUp" data-wow-delay=".4s">
                    <div class="p-4 text-center" style="background:#293565; color:#fff;">
                        <h5 class="mb-2" style="color:#fff;">Admission Enquiry</h5>
                        <h3 style="color:#f7c94e;">Call (+94) 112 301 982</h3>
                        <p class="mb-0">For any kind of admission enquiry</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if ($cpdTopics->isNotEmpty())
        <section class="section-padding pt-0">
            <div class="container">
                <div class="section-title mb-4">
                    <h2 class="wow fadeInUp" data-wow-delay=".2s">Upcoming CPD Topics</h2>
                </div>
                <div class="row g-3">
                    @foreach ($cpdTopics as $topic)
                        <div class="col-lg-6">
                            <div class="p-3" style="background:#fff; border:1px solid #e6eaf3;">
                                {{ $topic->title }}
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection