@extends('frontend.master')
@section('page_title', 'Editorial Board | KYAMC Journal')

@section('frontend_content')

    <!-- Inner Page Header -->
    <section class="inner-page-header py-4 mb-5" style="background-color: var(--theme-primary);">
        <div class="container">
            <h2 class="fw-semibold text-white mb-0">Editorial Board</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mt-2 mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}"
                            class="text-white-50 text-decoration-none">Home</a></li>
                    <li class="breadcrumb-item"><span class="text-white-50">Journal Info</span></li>
                    <li class="breadcrumb-item active text-white" aria-current="page">Editorial Board</li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- Main Content Area: Editor Profiles -->
    <main class="flex-grow-1 mb-5 pb-4">

        @foreach($categories as $category)
            @if($category->members->count() > 0)
                <!-- Category Section (e.g., Editor-in-Chief, Executive Editor) -->
                <div class="category-group mb-5">
                    <div class="container">
                        <h4 class="fw-bold text-dark mb-4 ms-md-3">{{ $category->name }}</h4>
                    </div>

                    @foreach($category->members as $member)
                        <section class="editor-profile-section mb-4">
                            <div class="container">
                                <div class="row align-items-center mb-4">
                                    <div class="col-md-3 text-center mb-3 mb-md-0">
                                        @if($member->photo)
                                            <!-- Render uploaded image -->
                                            <img src="{{ asset($member->photo) }}" alt="{{ $member->name }}"
                                                class="rounded-circle profile-img shadow-sm"
                                                style="width: 200px; height: 200px; object-fit: cover;">
                                        @else
                                            <!-- Fallback Dummy Image -->
                                            <img src="https://dummyimage.com/200x200/d1d1d1/595959.png&text=Photo" alt="{{ $member->name }}"
                                                class="rounded-circle profile-img shadow-sm">
                                        @endif
                                    </div>
                                    <div class="col-md-9">
                                        <div class="profile-name-block py-2 mb-3">
                                            <h5 class="mb-0 text-theme-primary fw-semibold">
                                                {{ $member->name }}
                                                @if($member->qualifications)
                                                    <span class="fs-6 fw-medium text-theme-primary">, {{ $member->qualifications }}</span>
                                                @endif
                                            </h5>
                                        </div>
                                        <div class="profile-details text-dark">
                                            <!-- Display fields conditionally if they contain data -->
                                            @if($member->designation)
                                            <p class="mb-0">{{ $member->designation }}</p>@endif
                                            @if($member->department)
                                            <p class="mb-0">{{ $member->department }}</p>@endif
                                            @if($member->institution)
                                            <p class="mb-0">{{ $member->institution }}</p>@endif
                                            @if($member->country)
                                            <p class="mb-0">{{ $member->country }}</p>@endif

                                            @if($member->email)
                                                <p class="mt-2 mb-0"><strong>Email:</strong> <a href="mailto:{{ $member->email }}"
                                                        class="text-dark text-decoration-underline">{{ $member->email }}</a></p>
                                            @endif

                                            @if($member->research_interest)
                                                <div class="mt-2 mb-0">
                                                    <strong class="me-2">Research interest:</strong>
                                                    <div class="d-inline-block mt-1">
                                                        @foreach(explode(',', $member->research_interest) as $interest)
                                                            @if(trim($interest)) <!-- Checks to ensure it's not empty -->
                                                                <span class="badge bg-light text-secondary border fw-normal me-1 mb-1 px-2 py-1">
                                                                    {{ trim($interest) }}
                                                                </span>
                                                            @endif
                                                        @endforeach
        </div>
    </div>
@endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Full Width Grey Button Band -->
                            <!-- Only shows up if at least ONE of the three links exists in the database -->
                            @if($member->orcid_link || $member->research_gate_link || $member->google_scholar_link)
                                <div class="bg-light w-100 py-3 border-top border-bottom">
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-md-9 offset-md-3 text-center text-md-start">

                                                @if($member->orcid_link)
                                                    <a href="{{ $member->orcid_link }}" target="_blank"
                                                        class="btn btn-academic me-1 mb-1 mb-md-0">ORCID</a>
                                                @endif

                                                @if($member->research_gate_link)
                                                    <a href="{{ $member->research_gate_link }}" target="_blank"
                                                        class="btn btn-academic me-1 mb-1 mb-md-0">Research Gate</a>
                                                @endif

                                                @if($member->google_scholar_link)
                                                    <a href="{{ $member->google_scholar_link }}" target="_blank"
                                                        class="btn btn-academic mb-1 mb-md-0">Google Scholar</a>
                                                @endif

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </section>
                    @endforeach
                </div>
            @endif
        @endforeach

        <!-- Fallback if no board members exist -->
        @if(
                $categories->isEmpty() || $categories->sum(function ($cat) {
                    return $cat->members->count();
                }) == 0
            )
            <div class="container text-center py-5">
                <h4 class="text-muted">Editorial Board is currently being updated.</h4>
            </div>
        @endif

    </main>

@endsection