@extends('front.app')
@section('content')
    <section class="wrapper bg-light">
        <div class="container pt-10 pt-md-14">
            <div class="row">
                <div class="col-md-8 col-lg-7 col-xl-6 col-xxl-5">
                    <h1 class="display-1 mb-3">{{ trans('module.news_title') }}</h1>
                    <p class="lead fs-lg pe-lg-15 pe-xxl-12">{{ trans('module.news_text') }}</p>
                </div>
                <!-- /column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>
    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="grid grid-view projects-masonry">
                <div class="isotope-filter filter mb-10">
                    <p>{{ trans('module.news_filter_text') }}</p>
                    <ul>

                        <li><a class="filter-item @if(empty($_GET['filter'])) active @endif" data-filter="*">{{ trans('module.news_filter_all') }}</a></li>

                        @foreach ($newsCategories as $category)
                            @if(!empty($_GET['filter'])  && $_GET['filter'] == $category->domain_name)
                                <li><a class="filter-item active" data-filter=".{{ $category->domain_name }}">{{ $category->name }}</a></li>
                            @else
                                <li><a class="filter-item " data-filter=".{{ $category->domain_name }}">{{ $category->name }}</a></li>
                            @endif

                        @endforeach
                    </ul>
                </div>
                <div class="row gx-md-8 gy-10 gy-md-13 isotope">
                    @foreach ($news as $new)
                        <div class="project item col-md-6 col-xl-3 {{ $new->category->domain_name }}">
                            <article>
                                <div class="card">
                                    <div class="card-body">
                                        <div class="post-header">
                                            <div class="post-category text-line red-color">
                                                <a class="hover red-color">{{ $new->category->name }}</a>
                                                @if ($new->featured)
                                                    <i class="uil uil-star ml-2"></i>
                                                @endif
                                            </div>
                                            <!-- /.post-category -->

                                                <h2 class="post-title h3 mt-1 mb-3"><a class="link-dark"
                                                        href="{{url('stiri/'.$new->id)}}">{{ $new->title }} </a></h2>

                                        </div>
                                        @if (@$new->images[0])
                                            <figure class="card-img-top overlay overlay-1 hover-scale"><img
                                                    class="img-fluid imgRatio" src="{{ @$new->images[0]->original }}" />
                                            </figure>
                                        @else
                                            <figure class="card-img-top overlay overlay-1 hover-scale"><img
                                                    class="img-fluid imgRatio" src="{{ url('img/no_image.jpg') }}" />
                                            </figure>
                                        @endif 
                                        <!-- /.post-header -->
                                        <div class="post category text-center p-2">
                                            <a class=" fw-bold " href="{{url('stiri/'.$new->id)}}">Vezi informatii</a>
                                        </div>
                                        <div class="post-content">
                                            <p>{{ \Illuminate\Support\Str::limit($new->description, 150, $end = '...') }}</p>
                                        </div>
                                        <!-- /.post-content -->
                                    </div>
                                    <!--/.card-body -->
                                    <div class="card-footer">
                                        <ul class="post-meta d-flex mb-0">
                                            @php
                                                $newsDate = $new->date ?:$new->updated_at;
                                            @endphp

                                            <li class="post-date"><i
                                                    class="uil uil-calendar-alt"></i><span>{{\Illuminate\Support\Carbon::parse($newsDate)->format('d.m.Y')}}</span>
                                            </li>

                                        </ul>
                                        <!-- /.post-meta -->
                                    </div>
                                    <!-- /.card-footer -->
                                </div>
                                <!-- /.card -->
                            </article>
                        </div>
                    @endforeach
                </div>
                <!-- /.row -->
            </div>
            <!-- /.grid -->
        </div>
        <!-- /.container -->
    </section>
@endsection
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let filterItems = document.querySelectorAll('.filter-item');
            let urlParams = new URLSearchParams(window.location.search);
            let selectedCategory = urlParams.get('category');
                // Category parameter is present, find and mark the corresponding filter item
                filterItems.forEach(item => {
                    if (item.getAttribute('data-filter') === '.' + selectedCategory) {
                        console.log('este',item.getAttribute('data-filter') )
                        item.click();
                        // item.classList.add('active');
                    }
                });
        });
    </script>