@extends('layouts.home')

@push('css')
<link rel="stylesheet" href="{{ asset('home') }}/css/index.css">
<link rel="stylesheet" href="{{ asset('home') }}/css/leadershipTeam.css">
@endpush


@section('content')
<!-- hero -->
<section class="hero lead-hero">
    <div class="container hero-content">
        <h2>Leadership Team</h2>
        <p>Meet the clinicians, executives and program leaders guiding TGP Hospital’s strategy, clinical excellence and
            community impact.</p>
        <div class="hero-buttons" style="margin-top:12px"><a href="{{ route('career') }}">
                <button class=" text-white btn btn-outline">Careers</button></a><a
                href="{{ route('leadership') }}"><button class="btn btn-primary">Contact
                    Leadership</button></a></div>
    </div>
</section>

<main class="container section">
    <!-- featured leader -->
    <section>
        <div class="featured">
            <div class="photo"><img src="{{ asset('public/'.$ceo->image) }}" alt="Chief Executive Officer"></div>
            <div style="flex:1">
                <div class="badge">{{ $ceo->position }}</div>
                <h2 style="margin:8px 0 6px">{{ $ceo->name }}</h2>
                <p class="muted">{{ $ceo->degree }} — {{$ceo->short_description}}</p>
                <div style="margin-top:12px"><a class="btn btn-primary" href="mailto:{{ $ceo->email }}">Contact Dr.
                        Rahman</a> <button class="btn btn-outline" id="viewBioCEO">View full bio</button></div>
            </div>
        </div>
    </section>

    <!-- team grid -->
    <section>
        <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
            <h3 style="margin:0">Executive & Clinical Leadership</h3>
            <div class="muted">Core leadership, clinical directors and program heads</div>
        </div>

        <div class="team-grid" id="teamGrid">


            <!-- Card: Chief Nursing Officer -->

            @foreach ($leaders as $leader)
            <article class="team-card" data-id="cno">
                <div class="team-photo"><img src="{{ asset('public/'.$leader->image) }}" alt="Chief Nursing Officer">
                </div>
                <div class="team-role">{{ $leader->position }}</div>
                <div class="team-name">{{ $leader->name }}</div>
                <div class="team-creds">{{ $leader->degree }}</div>
                <div class="team-bio">{{$leader->short_description}}</div>
                <div class="team-actions"><button class="btn-ghost" data-profile="cno">View profile</button><a
                        class="btn-ghost" href="mailto:{{ $leader->email }}"><i class="fas fa-envelope"></i></a>
                </div>
            </article>
            @endforeach

        </div>
    </section>

    <!-- CTA -->
    {{-- <section style="margin-top:20px;text-align:center">
        <a class="btn btn-outline" href="/docs/leadership-bios.pdf" download><i class="far fa-file-pdf"></i> Download
            full
            leadership bios (PDF)</a>
    </section> --}}

</main>

<!-- modal (single modal used for all profiles) -->
<div class="modal" id="profileModal" aria-hidden="true" role="dialog" aria-modal="true">
    <div class="modal-card">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
            <h3 id="modalName" style="margin:0"></h3>
            <button class="modal-close" id="modalClose" aria-label="Close">✕</button>
        </div>
        <p id="modalRole" style="font-weight:700;color:var(--primary);margin:0 0 8px"></p>
        <div id="modalContent" style="color:var(--text)"></div>
        <div style="margin-top:12px"><a id="modalEmail" class="btn btn-outline" href="#"><i class="fas fa-envelope"></i>
                Contact</a></div>
    </div>
</div>
@endsection

@push('js')
<script src="{{ route('home') }}/js/index.js"></script>
<script src="{{ route('home') }}/js/leadershipTeam.js"></script>
@endpush