@extends('layouts.app')
@section('title')
Sustainable Development Goals
@parent
@stop
@section('content')
<style>
    .logo_display {
        width: 60px;
        height: 60px;
        position: absolute;
        bottom: -10px;
        right: -15px;
    }

    .logo_sdg {
        width: 100px;
        height: 100px;
        margin-right: 10px;
    }

    .sdg_background {
        background-color: #fff;
        position: relative;
        transition: 0.3s all ease-in-out;
    }

    .sdg_background:hover {
        border-radius: 10px;
        background-size: 28%;
        color: #fff;
        background-color: #39638e;
        border-color: #39638e;
    }

    .sdg_background:hover h4 a {
        color: #fff;
    }

    .sdg_background:hover:after {
        background: url('/images/logo-logo.png') bottom right;
        opacity: .1;
        background-repeat: no-repeat;
        width: 100px;
        height: 100px;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: 0;
        content: "";
        background-size: contain;
    }
</style>
<main>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="myCard">
                    <div class="card-body border-bottom">
                        <div class="d-flex align-items-center mb-3">
                            <img src="/images/sdgs/{{$sdg_detail->logo_file_name}}" alt="logo" class="logo_sdg" />
                            <h2>{{$sdg_detail->title}}</h2>
                        </div>
                        <h4 class="fw-bolder">{!! $sdg_detail->description !!}</h4>
                    </div>
                </div>
            </div>
        </div>
        <div class="row list py-3">
            @if(count($sdg_journals)>0)
            @foreach ($sdg_journals as $journals)
            <div class="col-md-6 mb-3">
                <div class="h-100 p-3 rounded sdg_background">
                    <div class="row">
                        <div class="col-md-4 col-lg-3">
                            <div class="position-relative">
                                <a href="{{ URL::route('journal', $journals->journal_id) }}">
                                    @if(isset($journals->image_file_name))
                                    <img class="img-fluid" src="{{'/images/bentham/'.$journals->image_file_name}}" />
                                    @else
                                    <img alt="profile pic" src="http://placehold.it/95x125">
                                    @endif
                                    <img src="/images/sdgs/{{$sdg_detail->logo_file_name}}" alt="logo" class="logo_display" />
                                </a>
                            </div>
                        </div>
                        <div class="col-md-8 col-lg-9">
                            <h4>
                                <a href="{{ URL::route('journal', $journals->journal_id) }}">
                                    {{$journals->title}}
                                </a>
                            </h4>
                            <p>
                                ISSN (Print):{{$journals->issn}}
                                <br>
                                ISSN (Online):{{$journals->eissn}}
                                </br>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            @else
            <div class="card card-body">
                <p class=" m-0 text-center text-secondary">
                    <i class="far fa-frown mr-1 mb-2 fa-3x text-secondary"></i>
                    <br>
                    <strong> No record found ....</strong>
                </p>
            </div>
            @endif
        </div>
    </div>
</main>
<!----Main Section Ends---->
@endsection