@extends('layouts.app')

@section('content')
    {{-- Banner --}}
    <section class="page-banner position-relative d-flex align-items-end"
        style="background-image:url('{{ asset('uploads/abouts/scientists.png') }}');
               background-position:center;
               background-size:cover;
               background-repeat:no-repeat;
               min-height:450px;">

        <div class="position-absolute top-0 start-0 w-100 h-100 banner-overlay"></div>

        <div class="container position-relative text-white pb-5">

            <span class="page-tag">ZSI Scientists</span>

            <h1 class="display-3 fw-bold mb-3">
                {{ $page->szPageTitle }}
            </h1>

            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ url('/') }}" class="text-white text-decoration-none">
                            Home
                        </a>
                    </li>

                    <li class="breadcrumb-item">
                        <a href="{{ route('frontent.about.about') }}" class="text-white text-decoration-none">
                            About Us
                        </a>
                    </li>

                    <li class="breadcrumb-item active text-warning">
                        {{ $page->szPageTitle }}
                    </li>
                </ol>
            </nav>

        </div>

    </section>

    {{-- Scientists Section --}}
    <section class="scientists-section py-5">

        <div class="container">

            {{-- Intro Content --}}
            <div class="scientists-intro-card mb-5">

                <div class="section-heading">

                    <div class="heading-icon">
                        <i class="fas fa-microscope"></i>
                    </div>

                    <div>
                        <span>Zoological Survey of India</span>
                        <h2>{{ $page->szPageTitle }}</h2>
                    </div>

                </div>

                <div class="scientists-content">
                    {!! $page->szPageContent !!}
                </div>

            </div>

            {{-- Scientist Cards --}}
            <div class="row g-4">

                @forelse($scientists as $scientist)
                    <div class="col-lg-4 col-md-6">

                        <div class="scientist-card">

                            <div class="scientist-image">

                                @if (!empty($scientist->szScientistImage))
                                    <img src="{{ asset('uploads/scientists/' . $scientist->szScientistImage) }}"
                                        alt="{{ $scientist->szScientistName }}">
                                @else
                                    <img src="{{ asset('images/default-scientist.jpg') }}"
                                        alt="{{ $scientist->szScientistName }}">
                                @endif

                            </div>

                            <div class="scientist-info">

                                <h5>{{ $scientist->szScientistName }}</h5>

                                <span class="designation">
                                    {{ $scientist->szScientistDesignation }}
                                </span>

                                @if (!empty($scientist->szInstitution))
                                    <p class="small text-muted mt-2 mb-0">
                                        {{ Str::limit(strip_tags($scientist->szInstitution), 80) }}
                                    </p>
                                @endif

                            </div>

                        </div>

                    </div>

                @empty

                    <div class="col-12">
                        <div class="alert alert-warning text-center">
                            No Scientists Found.
                        </div>
                    </div>
                @endforelse

            </div>

            {{-- PAGINATION --}}
            @if ($scientists->hasPages())
                <div class="custom-pagination-wrapper mt-5">
                    {{ $scientists->links() }}
                </div>
            @endif

            {{-- Back Button --}}
            <div class="text-end mt-5">

                <a href="javascript:history.back()" class="btn btn-success">

                    <i class="fas fa-arrow-left me-2"></i>

                   {{__('messages.previous')}}

                </a>

            </div>

        </div>

    </section>
@endsection