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

@section('title', $institute->title ?? 'Institutes Title')

@push('styles')
    <style>
        .blog-details__img img {
            object-fit: contain;
            max-height: 500px;
        }

        .sidebar__post-image img {
            object-fit: contain;
            max-height: 100px;
        }

    </style>
@endpush

@section('content')

    <x-frontend.breadcrumbs :title="$institute->title ?? 'Institutes Title'" :active="$institute->title ?? 'Institutes Title'" />

    <section class="blog-details">
        <div class="container py-5">
            <div class="row">
                <div class="col-xl-8 col-lg-7">
                    <div class="blog-details__left">
                        <div class="blog-details__img">

                            @if ($institute->feature_image && file_exists(public_path('uploads/institutes/' . $institute->feature_image)))
                                <img src="{{ asset('uploads/institutes/' . $institute->feature_image) }}"
                                    alt="{{ $institute->title ?? 'Institutes Title' }}">
                            @else
                                <img src="{{ asset('frontend/images/no-image.jpg') }}"
                                    alt="{{ $institute->title ?? 'Institutes Title' }}">
                            @endif
                        </div>
                        <div class="blog-details__content">
                            {!! $institute->content ?? 'Institutes Contents' !!}
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-5">
                    <div class="sidebar">
                        {{-- <div class="sidebar__single sidebar__search">
                            <form action="#" class="sidebar__search-form">
                                <input type="search" placeholder="Search here">
                                <button type="submit"><i class="lnr-icon-search"></i></button>
                            </form>
                        </div> --}}
                        <div class="sidebar__single sidebar__post pt-3 px-1">
                            <h3 class="sidebar__title">More Institutes</h3>
                            <ul class="sidebar__post-list list-unstyled">

                                @forelse ($relatedInstitutes as $relatedInstitute)
                                    <li>
                                        <div class="sidebar__post-image">

                                            @if ($relatedInstitute->feature_image && file_exists(public_path('uploads/institutes/' . $relatedInstitute->feature_image)))
                                                <a href="{{ route('frontend.institutes.show', $relatedInstitute->slug) }}">
                                                    <img src="{{ asset('uploads/institutes/' . $relatedInstitute->feature_image) }}"
                                                        alt="{{ $relatedInstitute->title ?? 'Institutes Title' }}">
                                                </a>
                                            @else
                                                <a href="{{ route('frontend.institutes.show', $relatedInstitute->slug) }}">
                                                    <img src="{{ asset('frontend/images/no-image.jpg') }}"
                                                        alt="{{ $relatedInstitute->title ?? 'Institutes Title' }}">
                                                </a>
                                            @endif
                                        </div>
                                        <div class="sidebar__post-content">
                                            <h3>
                                                <a href="{{ route('frontend.institutes.show', $relatedInstitute->slug) }}">
                                                    {{ $relatedInstitute->title ?? 'Institutes Title' }}
                                                </a>
                                            </h3>
                                        </div>
                                    </li>
                                @empty
                                    <li>
                                        <div class="sidebar__post-image">
                                            <img src="https://via.placeholder.com/370x320" alt="No Image">
                                        </div>
                                        <div class="sidebar__post-content">
                                            <h3>
                                                <a href="#">
                                                    No Institutes Found !
                                                </a>
                                            </h3>
                                        </div>
                                    </li>
                                @endforelse
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection