@extends('layouts.app')
@section('content')
    <main class="main {{ $mainClass }}">

        {{-- PAGE HERO --}}
        <section class="promo-primary position-relative overflow-hidden">

            <picture>
                <source srcset="{{ $bannerImage }}" media="(min-width:992px)">
                <img src="{{ $bannerImage }}" class="img--bg" alt="{{ $rcName }}">
            </picture>

            <div class="promo-overlay"></div>

            <div class="container">
                <div class="row">
                    <div class="col-lg-10">

                        <div class="promo-primary__content">

                            <!-- Breadcrumb -->
                            <nav aria-label="breadcrumb">
                                <ul class="breadcrumb d-flex">

                                    <li class="breadcrumb-item">
                                        <a class="text-white hover-yellow" href="{{ url('/') }}">
                                            {{ $szLanguageCode == 'hi' ? 'मुखपृष्ठ' : 'Home' }}
                                        </a>
                                    </li>

                                    <li class="breadcrumb-item">
                                        <a class="text-white hover-yellow" href="javascript:void(0)">
                                            {{ $szLanguageCode == 'hi' ? 'क्षेत्रीय केंद्र एवं मुख्यालय' : 'Regional Centres and HQ' }}
                                        </a>
                                    </li>

                                    <li class="breadcrumb-item">
                                        <a class="text-white hover-yellow" href="{{ url('rc-with-map') }}">
                                            {{ $szLanguageCode == 'hi' ? 'क्षेत्रीय केंद्र' : 'Regional Centres' }}
                                        </a>
                                    </li>

                                    @if ($rcName)
                                        <li class="breadcrumb-item">

                                            <a class="text-white hover-yellow" href="{{ url('regional-centres/?rc=' . $rc) }}">

                                                {{ $rcName }}

                                            </a>

                                        </li>
                                    @endif

                                    <li class="breadcrumb-item active  text-warning">

                                        {{ $rcName }}

                                        {{ $szLanguageCode == 'hi' ? 'प्रकाशन' : 'Publication' }}

                                    </li>

                                </ul>
                            </nav>

                            <!-- Title -->

                            <h1 class="promo-primary__title">

                                <span>

                                    {{ $rcName }}

                                </span>

                                <span>

                                    {{ $szLanguageCode == 'hi' ? 'प्रकाशन' : 'Publication' }}

                                </span>

                            </h1>

                        </div>

                    </div>
                </div>
            </div>

        </section>

        {{-- Publication section --}}

        <section class="publication-section py-5">
            <div class="container">

                <div class="row mb-5">
                    <div class="col-lg-8 mx-auto text-center">
                        <span class="section-tag">

                            {{ $szLanguageCode == 'hi' ? 'क्षेत्रीय केंद्र प्रकाशन' : 'Regional Centre Publications' }}

                        </span>

                        <h2 class="section-title">
                            {{ $szLanguageCode == 'hi' ? 'प्रकाशन' : 'Publications' }}
                        </h2>

                    </div>
                </div>

                @forelse($arPublications as $publication)
                    <div class="publication-card mb-4">

                        <div class="publication-header" data-bs-toggle="collapse"
                            data-bs-target="#publication{{ $publication->id }}" role="button">

                            <div>

                                <h4 class="publication-title mb-1">
                                    {{ $szLanguageCode == 'hi' ? $publication->szTitleHindi : $publication->szTitle }}
                                </h4>


                            </div>

                            <div class="publication-icon">

                                <i class="fas fa-plus"></i>

                            </div>

                        </div>

                        <div id="publication{{ $publication->id }}" class="collapse">

                            <div class="publication-body">

                                {!! $szLanguageCode == 'hi' ? $publication->szPageContentHindi : $publication->szPageContent !!}
                            </div>

                        </div>

                    </div>

                @empty

                    <div class="alert alert-info text-center shadow-sm rounded-4">

                        <i class="fas fa-info-circle me-2"></i>

                        {{ $szLanguageCode == 'hi' ? 'कॉन्टेन्ट जल्द ही अपडेट किया जाएगा' : 'Data will be updated soon.' }}

                    </div>
                @endforelse

            </div>
        </section>
@endsection