@extends('front.layout.pages-layout')
@section('pageTitle', $pageTitle ?? 'Document Title')
@section('meta_tags')
    {!! SEO::generate() !!}
@endsection

@section('content')
<section class="py-5">
    <div class="container">
        <h3 class="mb-4">Downloadable Forms</h3>

        <div class="list-group">
            @php
                $forms = [
                    'application-for-leave' => 'Application for Leave',
                    'enrollment-form-front' => 'Enrollment Form Front',
                    'enrollment-form-back' => 'Enrollment Form Back',
                    'pagibig-loan' => 'Pag-IBIG MultiPurpose Loan Application',
                    'sss-loan' => 'SSS MultiPurpose Loan Application',
                ];
            @endphp

            @foreach ($forms as $file => $label)
                <a href="{{ route('download.file', ['filename' => $file]) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center bg-poly text-white rounded mb-2">
                    <div>
                        <i class="bi bi-download me-2"></i> | {{ $label }}
                    </div>
                    <i class="bi bi-chevron-right"></i>
                </a>
            @endforeach
        </div>
    </div>
</section>
@endsection

@push('stylesheets')
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
<style>
    .department-single {
        background-image: url('/front/images/background_pcds.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding: 20px;
    }

    @media screen and (max-width: 768px) {
        .department-single {
            background-image: none;
        }
    }
</style>
@endpush
