@extends('layouts.app')

@section('title', 'Library & Campus 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">Library & Campus 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><a href="{{ route('facilities.index') }}" class="text-white">Facilities</a></li>
                <li class="text-white">/</li>
                <li class="active text-white">Library & Facilities</li>
            </ul>
        </div>
    </div>
    <!-- breadcrumb end -->

    <!-- facilities section -->
    <div class="facilities-detail py-120">
        <div class="container">
            <!-- Library & e-Library -->
            <div class="row align-items-center g-5 mb-5 pb-5 border-bottom">
                <div class="col-lg-6">
                    <div class="detail-content">
                        <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Resource Center</span>
                        <h2 class="site-title mb-4">Library & <span>e-Library</span></h2>
                        <p class="text-justify mb-3">
                            We have structured a spacious, resourceful library featuring comfortable study environments and welcoming interiors. It connects students to valuable references, print journals, newspapers, and magazines.
                        </p>
                        <p class="text-justify mb-4">
                            Additionally, our **e-Library research terminals** provide students with digital databases, research articles, and online course components. This enables comprehensive referencing for assignments and test preparation.
                        </p>
                        
                        <div class="row g-3">
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> 5,000+ reference volumes</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Digital journal portals</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Silent study layout zones</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> PC terminals for research</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="image-box rounded shadow-lg overflow-hidden border">
                        <img src="{{ asset('assets/img/about/about.jpg') }}" alt="Resourful Library" class="img-fluid w-100">
                    </div>
                </div>
            </div>

            <!-- Classrooms & Auditorium -->
            <div class="row align-items-center g-5 mb-5 pb-5 border-bottom">
                <div class="col-lg-6 order-lg-2">
                    <div class="detail-content">
                        <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Smart Learning Spaces</span>
                        <h2 class="site-title mb-4">Classrooms & <span>Auditorium</span></h2>
                        <p class="text-justify mb-3">
                            Our classrooms are spacious, standard, well-ventilated, and equipped with smart multimedia tools. This supports a highly interactive learning process, making classes engaging and visual.
                        </p>
                        <p class="text-justify mb-4">
                            For assemblies, inter-school debates, and co-curricular programs, we maintain a **300-seat multi-purpose auditorium** fitted with high-quality acoustics, lighting systems, and stage equipment.
                        </p>
                        
                        <div class="row g-3">
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Multimedia smart classes</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> 300-seat auditorium</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Digital learning systems</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Well-ventilated layout</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6 order-lg-1">
                    <div class="image-box rounded shadow-lg overflow-hidden border">
                        <img src="{{ asset('assets/img/about/02.jpg') }}" alt="Smart Classrooms" class="img-fluid w-100">
                    </div>
                </div>
            </div>

            <!-- Health Care & Dress Uniforms -->
            <div class="row align-items-center g-5 pt-5">
                <div class="col-lg-6">
                    <div class="detail-content">
                        <span class="site-title-tagline"><i class="far fa-book-open-reader"></i> Welfare & Identity</span>
                        <h2 class="site-title mb-4">First Aid & <span>Uniforms</span></h2>
                        <p class="text-justify mb-3">
                            Student well-being is our utmost priority. Our campus features a **fully equipped infirmary** run by a qualified nursing professional to administer immediate first aid for minor cuts, sprains, or illnesses. Urgent requirements are transferred to nearby clinics, and parents are immediately contacted.
                        </p>
                        <p class="text-justify mb-4">
                            To instill institutional pride and values, students wear recommended uniforms. On Tuesdays, we wear a customized casual T-shirt featuring the school logo. Details on sizes and colors are handed out upon registration.
                        </p>
                        
                        <div class="row g-3">
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Full-time campus nurse</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Immediate medical referral</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Tuesday logo T-Shirt casual</span>
                            </div>
                            <div class="col-6">
                                <span class="d-flex align-items-center gap-2 small text-muted"><i class="far fa-circle-check text-primary"></i> Standardized dress guidelines</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="image-box rounded shadow-lg overflow-hidden border">
                        <img src="{{ asset('assets/img/about/01.jpg') }}" alt="First Aid & Grooming" class="img-fluid w-100">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection