@extends('site::layouts.master')

@section('title', 'Institutes')

@push('styles')
    <style>
        .news-block .inner-box {
            box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
        }

        .news-block .content-box {
            margin-top: 0px !important;
            margin-right: 0px !important;
            padding: 15px 8px 12px 15px !important;
            border-top: none !important;
        }

        .news-block .inner-box .image-box {
            border: 1px solid #ebebeb;
            border-radius: 5px;
            border-bottom: none !important;
            background-color: #fff;
        }

        .news-block .inner-box .image-box img {
            object-fit: contain;
            height: 200px !important;
        }

        .news-block .content-box a {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }
    </style>
@endpush

@section('content')

    <x-frontend.breadcrumbs title="Institutes" active="Institutes" />

    <section>
        <div class="container pt-5 pb-5">

            <div class="row justify-content-center">

                <h3 class="text-center mb-5">
                    <span class="border-3 pb-1 border-bottom border-gray px-3">
                        @php
                            $countrySectionTitle = getDataBySlug('Widget', 'institutes-section-title', 'content');
                        @endphp

                        @if ($countrySectionTitle)
                            {!! $countrySectionTitle->content ?? '-' !!}
                        @endif
                    </span>

                </h3>

                @forelse ($institutes as $institute)
                    <div class="news-block col-lg-3 col-md-4 col-sm-6">
                        <div class="inner-box">
                            <div class="image-box">
                                <figure class="image">
                                    @if($institute->feature_image && file_exists(public_path('uploads/institutes/' . $institute->feature_image)))
                                        <a href="{{ route('frontend.institutes.show', $institute->slug) }}"><img
                                                src="{{ asset('uploads/institutes/' . $institute->feature_image) }}"
                                                alt="{{ $institute->title }}" title="{{ $institute->title }}"></a>
                                    @else
                                        <a href="{{ route('frontend.institutes.show', $institute->slug) }}"><img
                                                src="{{ asset('frontend/images/no-image.jpg') }}" alt="{{ $institute->title }}" title="{{ $institute->title }}"></a>
                                    @endif
                                </figure>
                            </div>
                            <div class="content-box">
                                <div class="content">
                                    <h5 class="title">
                                        <a href="{{ route('frontend.institutes.show', $institute->slug) }}" title="{{ $institute->title ?? '-' }}">
                                            {{ $institute->title ?? '-' }}
                                        </a>
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-warning text-center" role="alert">
                            No Institutes Found !
                        </div>
                    </div>
                @endforelse
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="pagination justify-content-center">
                        @if (count($institutes) > 0)
                            {{ $institutes->links() }}
                        @endif
                    </div>
                </div>
            </div>

        </div>
    </section>

@endsection