@extends('layouts.app')

@section('content')
    {{-- Banner --}}
    <section class="page-banner position-relative d-flex align-items-end" style="background-image:url('{{ asset('uploads/abouts/common-banner.jpg') }}');
                                       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">
            <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">
                            {{ __('messages.home') }}
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                            About Us
                    </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">

            {{-- Scientist Cards --}}
            <div class="row g-4">
                @forelse($scientists as $scientist)
                            <div class="col-lg-3 col-md-6">
                                <div class="scientist-card" data-bs-toggle="modal" data-bs-target="#scientistModal" onclick="showScientist({{ Js::from([
                        "name" => lang($scientist->szScientistName, $scientist->szScientistNameHindi),
                        "designation" => lang($scientist->szScientistDesignation, $scientist->szScientistDesignationHindi),
                        "institution" => lang($scientist->szInstitution, $scientist->szInstitutionHindi),
                        "content" => lang($scientist->szScientistContent, $scientist->szScientistContentHindi),
                        "image" => !empty($scientist->szScientistImage)
                            ? asset('uploads/ScientistImage/' . $scientist->szScientistImage)
                            : asset('images/default-scientist.jpg'),
                    ]) }})">
                                    <div class="scientist-image">
                                        @if(!empty($scientist->szScientistImage))
                                            <img src="{{ asset('uploads/ScientistImage/' . $scientist->szScientistImage) }}"
                                                alt="{{ $scientist->szScientistName }}">
                                        @else
                                            <img src="{{ asset('images/default-scientist.jpg') }}" alt="{{ $scientist->szScientistName }}">
                                        @endif
                                    </div>
                                    <div class="scientist-info">
                                        <h5>{{ lang($scientist->szScientistName, $scientist->szScientistNameHindi) }}</h5>
                                        <span class="designation">
                                            {{ strip_tags(lang($scientist->szScientistDesignation, $scientist->szScientistDesignationHindi)) }}
                                        </span>
                                        @if (!empty($scientist->szInstitution))
                                            <p class="small text-muted mt-2 mb-0">
                                                {{ strip_tags(lang($scientist->szInstitution, $scientist->szInstitutionHindi)) }}
                                            </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 --}}

            {{-- 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>
    <div class="modal fade" id="scientistModal" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content border-0 rounded-4">
                <div class="modal-header">
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="row align-items-center">
                                <div class="col-lg-4">
                                    <img id="modalImage" class="img-fluid rounded-4 shadow w-100">
                                </div>
                                <div class="col-lg-8">
                                    <h4 class="modal-title" id="modalName"></h4>
                                    <h5 class="text-success" id="modalDesignation"></h5>
                                    <p class="text-muted" id="modalInstitution"></p>
                                    <hr>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 mt-4">
                            <div id="modalContent"></div>
                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>
    {{-- Back Top --}}
    <a href="#home" class="back-to-top">Top</a>
@endsection
@push('scripts')
    <script>
        function showScientist(data) {
            document.getElementById('modalName').innerHTML = data.name;

            document.getElementById('modalDesignation').innerHTML = data.designation;

            document.getElementById('modalInstitution').innerHTML = data.institution;

            document.getElementById('modalContent').innerHTML = data.content;

            document.getElementById('modalImage').src = data.image;
        }
    </script>
@endpush