@extends('layouts.app')

@section('title', 'Executive Board - ' . $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">Executive Board</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="text-white">About Us</li>
                <li class="text-white">/</li>
                <li class="active text-white">Executive Board</li>
            </ul>
        </div>
    </div>
    <!-- breadcrumb end -->

    <!-- board section -->
    <div class="team-page 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> Leadership Team</span>
                        <h2 class="site-title">Our Executive <span>Board</span></h2>
                        <p class="mb-5">
                            Committed educators, financial experts, and visionary edupreneurs steering {{ $siteContext->name }} towards excellence.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Chairman & Principal (Top Tier) -->
            <div class="row g-4 justify-content-center mb-5">
                <!-- Chairman -->
                <div class="col-md-6 col-lg-4">
                    <div class="card border-0 shadow-sm text-center h-100 rounded overflow-hidden">
                        <div class="p-0 d-flex justify-content-center align-items-center bg-light" style="height: 280px; overflow: hidden;">
                            <img src="{{ asset('wp-content/uploads/2021/06/Narayan-poudel.jpg') }}" alt="Mr. Narayan Poudel" class="img-fluid w-100 h-100" style="object-fit: cover; object-position: top;">
                        </div>
                        <div class="card-body py-4">
                            <h4 class="fw-bold mb-1">Mr. Narayan Poudel</h4>
                            <p class="text-primary mb-3 fw-bold">Chairman</p>
                            <p class="text-muted small">Visionary leader driving institutional excellence and community-centric policies.</p>
                            <a href="{{ route('about.message-chairperson') }}" class="theme-btn btn-sm mt-2">Read Message</a>
                        </div>
                    </div>
                </div>
                <!-- Principal -->
                <div class="col-md-6 col-lg-4">
                    <div class="card border-0 shadow-sm text-center h-100 rounded overflow-hidden">
                        <div class="p-0 d-flex justify-content-center align-items-center bg-light" style="height: 280px; overflow: hidden;">
                            <img src="{{ asset('wp-content/uploads/2021/06/Kiran-Sapkota.jpg') }}" alt="Mr. Kiran Sapkota" class="img-fluid w-100 h-100" style="object-fit: cover; object-position: top;">
                        </div>
                        <div class="card-body py-4">
                            <h4 class="fw-bold mb-1">Mr. Kiran Sapkota</h4>
                            <p class="text-primary mb-3 fw-bold">Principal / Member</p>
                            <p class="text-muted small">Leading academic execution, student care, and curriculum enhancement models.</p>
                            <a href="{{ route('about.message-principal') }}" class="theme-btn btn-sm mt-2">Read Message</a>
                        </div>
                    </div>
                </div>
                <!-- Finance Director -->
                <div class="col-md-6 col-lg-4">
                    <div class="card border-0 shadow-sm text-center h-100 rounded overflow-hidden">
                        <div class="p-0 d-flex justify-content-center align-items-center bg-light" style="height: 280px; overflow: hidden;">
                            <img src="{{ asset('wp-content/uploads/2021/06/Bishwo-G-Parajuli.jpg') }}" alt="Mr. Bishowgopal Parajuli" class="img-fluid w-100 h-100" style="object-fit: cover; object-position: top;">
                        </div>
                        <div class="card-body py-4">
                            <h4 class="fw-bold mb-1">Mr. Bishowgopal Parajuli</h4>
                            <p class="text-primary mb-3 fw-bold">Finance Director</p>
                            <p class="text-muted small">Overseeing economic strategies, funding structures, and infrastructure development projects.</p>
                            <span class="d-inline-block mt-4 text-muted small"><i class="far fa-circle-check text-primary"></i> Key Management</span>
                        </div>
                    </div>
                </div>
            </div>

            <hr class="my-5">

            <!-- Other Board Members -->
            <div class="row">
                <div class="col-12 text-center mb-4">
                    <h3 class="fw-bold">Board Members</h3>
                </div>
            </div>
            
            <div class="row g-4 justify-content-center">
                @php
                    $members = [
                        ['name' => 'Mr. Punya Sir', 'role' => 'Board Member', 'image' => 'wp-content/uploads/2021/07/Punya-sir.jpg'],
                        ['name' => 'Mr. Nabin Bandhu Koirala', 'role' => 'Board Member', 'image' => 'wp-content/uploads/2021/07/Nabin-Bandhu-Koirala-sir.jpg'],
                        ['name' => 'Mr. Prem Sharma', 'role' => 'Board Member', 'image' => 'wp-content/uploads/2021/06/Prem-Sir.jpg'],
                        ['name' => 'Mr. Ram Prasad Subedi', 'role' => 'Board Member', 'image' => 'wp-content/uploads/2021/07/Ram-Prasad-Subedi.jpg'],
                        ['name' => 'Mr. Rakesh Joshi', 'role' => 'Board Member', 'image' => 'wp-content/uploads/2021/06/Rakesh-Joshi.jpg'],
                        ['name' => 'Ms. Sandhya Poudel', 'role' => 'Board Member', 'image' => 'wp-content/uploads/2023/08/IMG_8929.jpeg'],
                    ];
                @endphp

                @foreach($members as $member)
                    <div class="col-md-6 col-lg-4">
                        <div class="card border-0 shadow-sm text-center h-100 rounded overflow-hidden">
                            <div class="p-0 d-flex justify-content-center align-items-center bg-light" style="height: 220px; overflow: hidden;">
                                <img src="{{ asset($member['image']) }}" alt="{{ $member['name'] }}" class="img-fluid w-100 h-100" style="object-fit: cover; object-position: top;">
                            </div>
                            <div class="card-body">
                                <h5 class="fw-bold mb-1">{{ $member['name'] }}</h5>
                                <p class="text-muted small mb-0">{{ $member['role'] }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <!-- board section end -->
@endsection