@extends('layouts.app')

@section('content')

    @php
        $banner = !empty($page->szBannerImage)
            ? asset('uploads/innerBanner/' . $page->szBannerImage)
            : asset('uploads/abouts/brief.jpg');

        $rcId = request('rc');

        $currentRC = $menu->firstWhere('id', $rcId);

        $rcName = $currentRC ? lang($currentRC->szName, $currentRC->szHindiName) : '';
    @endphp
    <section class="page-banner position-relative d-flex align-items-end"
        style="background-image:url('{{ $banner }}');
           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">

            </span>

            <h1 class="display-3 fw-bold mb-3">
                {{ $rcName }}
                {{ lang('Scientist Profile', 'वैज्ञानिक प्रोफाइल') }}
            </h1>
            <nav>
                <ol class="breadcrumb mb-0">

                    <li class="breadcrumb-item">
                        <a href="{{ url('/') }}" class="text-white text-decoration-none">
                            {{ lang('Home', 'मुखपृष्ठ') }}
                        </a>
                    </li>

                    <li class="breadcrumb-item">
                        <a href="javascript:void(0)" class="text-white text-decoration-none">
                            {{ lang('Regional Centres & HQ', 'क्षेत्रीय केंद्र एवं मुख्यालय') }}
                        </a>
                    </li>

                    <li class="breadcrumb-item">
                        <a href="{{ url('rc-with-map')}}" class="text-white text-decoration-none">
                            {{ lang('Regional Centres', 'क्षेत्रीय केंद्र') }}
                        </a>
                    </li>

                    @if ($currentRC)
                        <li class="breadcrumb-item">
                            <a href="{{ url('regional-centres?rc=' . $rcId) }}"
                                class="text-white text-decoration-none">
                                {{ $rcName }}
                            </a>
                        </li>
                    @endif

                    <li class="breadcrumb-item active text-warning">
                        {{ lang('Scientist Profile', 'वैज्ञानिक प्रोफाइल') }}
                    </li>

                </ol>
            </nav>

        </div>

    </section>
      {{-- Scientists Section --}}
    <section class="scientists-section py-5">
        <div class="container">
       
            {{-- Scientist Cards --}}
            <div class="row g-4">
                @forelse($arScientistProfile 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