@extends('layouts.app')

@section('title', 'Our Facilities - ' . $siteContext->name)

@section('content')
    <!-- breadcrumb -->
    <div class="site-breadcrumb" style="background-image: url('{{ asset('assets/img/breadcrumb/breadcrumb.jpg') }}'); background-size: cover; background-position: center; padding: 80px 0;">
        <div class="container text-center text-white">
            <h2 class="breadcrumb-title text-white">Our Facilities</h2>
            <ul class="breadcrumb-menu d-flex justify-content-center list-unstyled gap-2 mt-2">
                <li><a href="{{ route('home') }}" class="text-white">Home</a></li>
                <li class="text-white">/</li>
                <li class="active text-white">Facilities</li>
            </ul>
        </div>
    </div>
    <!-- breadcrumb end -->

    <!-- facilities hub section -->
    <div class="facilities-hub py-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mx-auto">
                    <div class="site-heading text-center">
                        <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Campus Amenities</span>
                        <h2 class="site-title">Premium Campus <span>Facilities</span></h2>
                        <p class="mb-5">
                            We support academic goals through modern labs, standard libraries, safe transportation, physical programs, and cozy boarding houses.
                        </p>
                    </div>
                </div>
            </div>

            <div class="row g-4">
                @php
                    $facilities = [
                        [
                            'title' => 'Library & e-Library',
                            'icon' => 'fa-books',
                            'desc' => 'Resourceful physical books, references, magazines, journals, alongside web research terminals.',
                            'route' => 'facilities.library'
                        ],
                        [
                            'title' => 'Advanced Laboratories',
                            'icon' => 'fa-flask',
                            'desc' => 'State-of-the-art physics, chemistry, biology, math, social sciences, and high-speed computer labs.',
                            'route' => 'facilities.laboratories'
                        ],
                        [
                            'title' => 'Hostel & Cafeteria',
                            'icon' => 'fa-hotel',
                            'desc' => 'Homely boarding hostels for boys and girls, paired with an hygienic cafeteria serving fresh foods.',
                            'route' => 'facilities.hostel-cafeteria'
                        ],
                        [
                            'title' => 'Sports & ECA Division',
                            'icon' => 'fa-basketball-hoop',
                            'desc' => 'Indoor/outdoor table tennis, basketball, badminton, and volleyball courts to foster physical development.',
                            'route' => 'facilities.sports-eca'
                        ],
                        [
                            'title' => 'Safe Transportation',
                            'icon' => 'fa-bus-school',
                            'desc' => 'Reliable and safe bus routes operating across different locations of Pokhara valley at reasonable charges.',
                            'route' => 'facilities.transportation'
                        ]
                    ];
                @endphp

                @foreach($facilities as $fac)
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0 shadow-sm p-4 h-100 rounded hover-card transition-all border-bottom border-3 border-transparent" style="border-radius: 8px;">
                            <div class="icon-box text-primary bg-light-primary rounded-circle mb-4 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                                <i class="fal {{ $fac['icon'] }} fs-3"></i>
                            </div>
                            <h4 class="fw-bold mb-2">{{ $fac['title'] }}</h4>
                            <p class="text-muted small mb-4 text-justify">{{ $fac['desc'] }}</p>
                            <a href="{{ route($fac['route']) }}" class="theme-btn btn-sm mt-auto text-center w-100">Learn More <i class="fas fa-arrow-right-long"></i></a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    
    <style>
        .hover-card:hover {
            box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.08) !important;
            transform: translateY(-5px);
            border-bottom-color: var(--bs-primary) !important;
        }
        .transition-all {
            transition: all 0.3s ease-in-out;
        }
    </style>
@endsection