@extends('frontend.layouts.app')

@section('content')
@include('frontend.home.carousel')
<div class="container-fluid text-center p-4" id="welcome">
    <h2 class="font-weight-bold">WELCOME TO DUHD - Department of Urban and Housing Development</h2>
</div>

{{-- <div class="container my-5" id="actSection">
    <div class="row">
        <div class="col-lg-6">
            <h2 class="text-center mb-4 font-weight-bold">
                ACTIVITIES & ACTION PLAN
            </h2>
            <ul class="list-group">
                @foreach ($actplans->take(6) as $actplan)
                    <li class="list-group-item"><a href="/uploads/{{ app()->getLocale() }}/{{ $actplan->translate(app()->getLocale())->file_path }}" target="_blank">{{ $actplan->name }}</a></li>
                @endforeach
            </ul>
        </div>
        <div class="col-lg-6">
            <h2 class="text-center mb-4 font-weight-bold">
                OUR REPORTS
            </h2>
            <ul class="list-group">
                @foreach ($reports->take(6) as $report)
                    <li class="list-group-item"><a href="/storage/uploads/{{ app()->getLocale() }}/{{ $report->translate(app()->getLocale())->file_path }}" target="_blank">{{ $report->name }}</a></li>
                @endforeach
            </ul>
        </div>
    </div>
</div> --}}

<div class="container my-5" id="newsSection">
    <h1 class="text-center font-weight-bold mb-5">ACTIVITIES</h1>
    <div class="row">
        {{-- <div class="col-lg-4 announcements">
            <div class="card">
                <ul class="list-group list-group-flush">
                    @foreach ($announcements->take(6) as $announcement)
                    @if (\App::getLocale() == 'my')
                        <li class="list-group-item" style="min-height: 100px;">
                            <h4 class="card-title lang-my"><a href="{{ route('announcements.show', $announcement->slug) }}">{{ $announcement->translate()->title }}</a></h4>
                            <p class="card-text lang-my">
                                {{ Str::of($announcement->translate(app()->getLocale())->body)->limit(100) }}
                            </p>
                            <p class="card-text text-danger">Date: {{ $announcement->date }}</p>
                        </li>
                    @else
                        <li class="list-group-item" style="min-height: 100px;">
                            <h4 class="card-title"><a href="{{ route('announcements.show', $announcement->slug) }}">{{ $announcement->translate()->title }}</a></h4>
                            <p class="card-text">
                                {{ Str::of($announcement->translate(app()->getLocale())->body)->limit(100) }}
                            </p>
                            <p class="card-text text-danger">Date: {{ $announcement->date }}</p>
                        </li>
                    @endif
                    @endforeach
                </ul>
            </div>
        </div> --}}
        <div class="col-lg-12 news">
            <div class="row mb-4">
                @foreach ($articles as $article)
                @if (\App::getLocale() == 'my')
                    <div class="col-lg-4">
                        <div class="news-card mb-4">
                            <img class="img-fluid" width="100%" height="300" src="/images/news_images/{{ $article->cover_image }}" alt="cover {{ $article->slug }}" style="width: 100%; height: 235px;" />
                            <div class="card">
                                <div class="card-body">
                                <h4 class="card-title lang-my"><a href="{{ route('article.show', $article->slug) }}">{{ $article->translate(app()->getLocale())->title }}</a></h4>
                                    <p class="card-text lang-my">
                                        {!! Str::of(strip_tags($article->translate(app()->getLocale())->body))->limit(300) !!}
                                        {{-- {{ str_limit(strip_tags($article->translate(app()->getLocale())->body), 200, '...') }} --}}
                                    </p>
                                    <p class="card-text text-danger">{{ $article->updated_at }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="col-lg-4">
                        <div class="news-card mb-4">
                            <img class="img-fluid" width="100%" height="300" src="/images/news_images/{{ $article->cover_image }}" alt="cover {{ $article->slug }}" style="width: 100%; height: 235px;" />
                            <div class="card">
                                <div class="card-body">
                                <h4 class="card-title"><a href="{{ route('article.show', $article->slug) }}">{!! Str::of(strip_tags($article->translate(app()->getLocale())->title))->limit(50) !!}</a></h4>
                                    <p class="card-text">
                                        {!! Str::of(strip_tags($article->translate(app()->getLocale())->body))->limit(300) !!}
                                        {{-- {{ str_limit(strip_tags($article->translate(app()->getLocale())->body), 200, '...') }} --}}
                                    </p>
                                    <p class="card-text text-danger">{{ $article->updated_at }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                @endforeach
            </div>
        </div>
    </div>
</div>

@if(\App::getLocale() == 'my')
<div class="container my-5" id="awarenessSection">
    <div class="row w-100">
        <h1 class="text-center my-5 w-100">PUBLIC AWARENESS</h1>
    </div>
    <div class="row px-5 pb-5">
        <div class="col-lg-6 col-md-12">
            <iframe src="https://drive.google.com/file/d/1Ay-GCZTwQwLWrNZsoXk_xQaVTzJjXWsp/preview" frameborder="0" width="100%" height="350px%"></iframe>
            <h5 class="text-center mt-2 text-white lang-my">မြိုပြနှင့် ဒေသဖွံဖြိုးရေး ဥပဒေမိတ်ဆက်ပွဲ</h5>
        </div>
        <div class="col-lg-6 col-md-12">
            <iframe src="https://drive.google.com/file/d/1ngujNVVbtpNwgsVmVWLVKpYBIKo6RXNa/preview" frameborder="0" width="100%" height="350px"></iframe>
            <h5 class="text-center mt-2 text-white lang-my">နောင်အနာဂတ်မြို့ကြီးများ၏ ရေစီမံခန့်ခွဲမှုကို ဘယ်လိုလုပ်ကြမလဲ အပိုင်း (၁) </h5>
        </div>
    </div>
</div>
@else
<div class="container my-5" id="awarenessSection">
    <div class="row w-100">
        <h1 class="text-center my-5 w-100">PUBLIC AWARENESS</h1>
    </div>
    <div class="row px-5 pb-5">
        <div class="col-lg-6 col-md-12">
            <iframe src="https://drive.google.com/file/d/1Ay-GCZTwQwLWrNZsoXk_xQaVTzJjXWsp/preview" frameborder="0" width="100%" height="350px%"></iframe>
            <h5 class="text-center mt-2 text-white">Introductin to Urban and Regional Planning Law</h5>
        </div>
        <div class="col-lg-6 col-md-12">
            <iframe src="https://drive.google.com/file/d/1ngujNVVbtpNwgsVmVWLVKpYBIKo6RXNa/preview" frameborder="0" width="100%" height="350px"></iframe>
            <h5 class="text-center mt-2 text-white">Water Management in Cities</h5>
        </div>
    </div>
</div>
@endif

<div class="container my-5">
    <div class="row text-center w-100">
        <div class="col">
            <h1 class="text-center font-weight-bold">PHOTO ALBUMS</h1>
        </div>
    </div>
    <div class="row px-5">
        @foreach ($albums as $album)
          <div class="col-lg-4 col-md-4 my-4">
            <div class="card">
              <div class="card-body">
                <img class="img-fluid" src="/uploads/albums/{{ $album->cover_img }}" alt="cover_image {{ $album->id }}">
              </div>
              <div class="card-title text-center">
                <a href="{{ route('album.photo', $album->id) }}"><h3>{{ $album->name }}</h3></a>
                {{-- <a href="/albums/{{ $article->id }}"><img class="img-fluid" src="/images/news_images/{{ $article->cover_image }}" alt="image-{{ $article->slug }}" style="width: 100%; height: 235px; object-fit: contain;" /></a> --}}
              </div>
            </div>
          </div>         
        @endforeach
        <div class="col text-center">
            <div class="text-center">
                <a class="btn btn-lg btn-danger" href="/albums">
                    VIEW MORE
                </a>
            </div>
        </div>
    </div>
</div>

<div class="container my-5" id="serviceFooter">
    <div class="row">
        <div class="col-lg-6 service-container">
            <img class="img-fluid circle-img" src="{{ asset('images/elibrary icon.png') }}" alt="circle-1">
            <div class="serv-desc">
                <p>LIBRARY BOOKS</p>
                <a class="text-danger" href="/library-book"> >See more about Library Book</a>
            </div>
        </div>
        <div class="col-lg-6 service-container">
            <img class="img-fluid circle-img" src="{{ asset('images/eservice icon.png') }}" alt="circle-1">
            <div class="serv-desc">
                <p>TOWN PLANS</p>
                <a class="text-danger" href="/town-plan"> >See more about Town Plans</a>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    let carousel = document.querySelectorAll("#carouselExampleControls .carousel-item");
    console.log(carousel);
    function setActiveState() {
        carousel[0].classList.add("active");
    }
    window.addEventListener('load', setActiveState());

    let frame = document.querySelectorAll("iframe");
    frame.forEach(element => element.setAttribute("allowFullScreen", true));
    // Refresh the iframe container in order to make fullscreen work properly. 
    // Link https://stackoverflow.com/questions/50875766/javascript-setattribute-iframe-allowfullscreen-doesnt-work-in-chrome
    frame.forEach(element => element.src = element.src);
</script>    
@endpush