@extends("layouts.master")

@section("title", "Downloads")

@section("content")



<style>

        .downloads-section {

            --dl-navy: #293565;

            --dl-orange: #e85d2a;

        }



        .downloads-flyer {

            display: block;

            transition: transform 0.25s ease, box-shadow 0.25s ease;

        }



        .downloads-flyer:hover {

            transform: scale(1.02);

        }



        .downloads-flyer__img {

            width: 100%;

            height: auto;

            display: block;

            border-radius: 4px;

            box-shadow: 0 8px 28px rgba(41, 53, 101, 0.12);

        }



        .downloads-block {

            margin-bottom: 2.5rem;

        }



        .downloads-block:last-child {

            margin-bottom: 0;

        }



        .downloads-block__title {

            font-size: clamp(1.25rem, 2.5vw, 1.5rem);

            font-weight: 700;

            color: var(--dl-navy);

            margin-bottom: 1rem;

            line-height: 1.35;

        }



        .downloads-block__text {

            font-size: 0.95rem;

            line-height: 1.8;

            color: #4a5568;

            margin-bottom: 0.75rem;

        }



        .downloads-block__programs-link {

            color: #353688;

            text-decoration: none;

        }



        .downloads-block__programs-link:hover {

            color: var(--dl-orange);

        }



        .downloads-sidebar {

            padding: 1.5rem;

            background: #f7f9fc;

            border: 1px solid #e6eaf3;

            border-radius: 4px;

        }



        .downloads-sidebar__title {

            font-size: 1.15rem;

            font-weight: 700;

            color: var(--dl-navy);

            margin-bottom: 1rem;

        }



        .downloads-sidebar__list {

            list-style: none;

            padding: 0;

            margin: 0;

        }



        .downloads-sidebar__list li {

            margin-bottom: 0.65rem;

            padding-bottom: 0.65rem;

            border-bottom: 1px solid #e6eaf3;

        }



        .downloads-sidebar__list li:last-child {

            margin-bottom: 0;

            padding-bottom: 0;

            border-bottom: none;

        }



        .downloads-sidebar__list a {

            font-size: 0.9rem;

            color: #4a5568;

            text-decoration: none;

            line-height: 1.5;

            transition: color 0.2s ease;

        }



        .downloads-sidebar__list a:hover {

            color: var(--dl-orange);

        }

    </style>



    

    <div class="breadcrumb-wrapper bg-cover"

        style="background-image: url('{{ asset("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">Downloads</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>Downloads</li>

                </ul>

            </div>

        </div>

    </div>



    <section class="section-padding">

        <div class="container">

            <div class="row g-4 g-lg-5">

                @if ($flyer && $flyer->imageUrl())

                    <div class="col-lg-4 wow fadeInUp" data-wow-delay=".2s">

                        <a href="{{ $flyer->pdfUrl() ?? '#' }}" class="downloads-flyer" target="_blank" rel="noopener"

                            title="Download flyer (PDF)">

                            <img src="{{ $flyer->imageUrl() }}" alt="{{ $flyer->title ?? 'ICCSSL flyer' }}"

                                class="downloads-flyer__img">

                        </a>

                    </div>

                @endif



                <div class="{{ $flyer && $flyer->imageUrl() ? 'col-lg-5' : 'col-lg-8' }}">

                    @forelse ($downloadBlocks as $block)

                        <div class="downloads-block wow fadeInUp" data-wow-delay=".3s">

                            @if ($block->title)

                                <h2 class="downloads-block__title">{{ $block->title }}</h2>

                            @endif



                            @foreach ($block->contentParagraphs() as $paragraph)

                                <p class="downloads-block__text {{ $loop->last ? 'mb-4' : '' }}">{{ $paragraph }}</p>

                            @endforeach



                            @if ($block->link_url && $block->link_label)

                                <p class="mb-3">

                                    <a href="{{ $block->link_url }}" class="downloads-block__programs-link">

                                        <strong>{{ $block->link_label }}</strong>

                                    </a>

                                </p>

                            @endif



                            @if ($block->pdfUrl())

                                <a href="{{ $block->pdfUrl() }}" class="theme-btn" target="_blank" rel="noopener">

                                    Download PDF

                                    <i class="fa-solid fa-download"></i>

                                </a>

                            @endif

                        </div>

                    @empty

                        <div class="alert alert-warning mb-0">No download content available yet.</div>

                    @endforelse

                </div>



                <div class="{{ $flyer && $flyer->imageUrl() ? 'col-lg-3' : 'col-lg-4' }} wow fadeInUp" data-wow-delay=".5s">

                    <div class="downloads-sidebar">

                        <h3 class="downloads-sidebar__title">Useful Sites</h3>

                        <ul class="downloads-sidebar__list">

                            @forelse ($usefulSites as $site)

                                <li>

                                    <a href="{{ $site->url }}" target="_blank" rel="noopener">{{ $site->title }}</a>

                                </li>

                            @empty

                                <li>No useful sites added yet.</li>

                            @endforelse

                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </section>



@endsection