@extends("front.layouts.newsLayout")

@section("content")
<main class="main">
    <div class="site-breadcrumb">
        <div class="container">
            <h2 class="breadcrumb-title">
                {{ TranslationHelper::translate("News", "site") }}
            </h2>
            <ul class="breadcrumb-menu">
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('site.index') }}">
                        {{ TranslationHelper::translate("home", "site") }}
                    </a>
                </li>
                <li></li>
            </ul>
        </div>
    </div>
    <!-- car area -->
    <div class="car-area grid bg py-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="car-widget">
                        <div class="car-search-form">
                            <h4 class="car-widget-title">
                                {{ TranslationHelper::translate("country", "site") }}
                            </h4>
                            <div class="checklists-container">
                                <div class="checklist-inp">

                                    <a
                                        href="{{ route('site.news.category', ['category' => $category, 'country' => 'ae']) }}">
                                        <input type="checkbox" disabled {{ $app->request->get("country") == "ae" ? 'checked' : '' }} />
                                        <label for="cu">{{ TranslationHelper::translate('emirates', 'site') }}</label>
                                    </a>

                                </div>
                                <div class="checklist-inp">

                                    <a
                                        href="{{ route('site.news.category', ['category' => $category, 'country' => 'eg']) }}">
                                        <input type="checkbox" disabled {{$app->request->get("country") == "eg" ? 'checked' : '' }} />
                                        <label for="cu">{{ TranslationHelper::translate('egypt', 'site') }}</label>
                                    </a>

                                </div>

                                <div class="checklist-inp">

                                    <a
                                        href="{{ route('site.news.category', ['category' => $category, 'country' => 'sa']) }}">
                                        <input type="checkbox" disabled {{ $app->request->get("country") == "sa" ? 'checked' : '' }} />
                                        <label for="cu">{{ TranslationHelper::translate('Saudi Arabia', 'site')
                                            }}</label>
                                    </a>

                                </div>
                                <div class="checklist-inp">

                                    <a
                                        href="{{ route('site.news.category', ['category' => $category, 'country' => 'lb']) }}">
                                        <input type="checkbox" disabled {{ $app->request->get("country") == "lb" ? 'checked' : '' }} />
                                        <label for="cu">{{ TranslationHelper::translate('Lebanon', 'site')
                                            }}</label>
                                    </a>

                                </div>
                                {{-- <div class="checklist-inp">

                                    <a
                                        href="{{ route('site.news.category', ['category' => $category, 'country' => 'qa']) }}">

                                        <label for="cu">{{ TranslationHelper::translate('Qatar', 'site') }}</label>
                                    </a>

                                </div> --}}

                                <div class="more">
                                    <button type="submit" class="more-btn">
                                        <span>
                                            <i class="fa-solid fa-plus"></i>
                                            See More
                                        </span>
                                        <span>
                                            <i class="fa-solid fa-minus"></i>
                                            See Less
                                        </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <form id="filterForm">
                        <div class="car-sidebar">
                            <div class="car-widget">
                                <div class="car-search-form">
                                    <input type="hidden" id="categoryDropdown" value="1" />
                                    <h4 class="car-widget-title">
                                        {{ TranslationHelper::translate("Search", "site") }}
                                    </h4>


                                    <div class="form-group">
                                        <input type="text" class="search_key form-control" name="search_key"
                                            id="search_key" />
                                        <button type="search">
                                            <i class="far fa-search"></i>
                                        </button>
                                    </div>

                                </div>
                            </div>





                            @php
                            // Get unique publisher names
                            $uniquePublishers = $newsItems->unique('publisher');
                            @endphp

                            <div class="car-widget">
                                <div class="car-search-form">
                                    <h4 class="car-widget-title">
                                        {{ TranslationHelper::translate("Source", "site") }}
                                    </h4>
                                    <div class="checklists-container">
                                        @foreach ($uniquePublishers as $item)
                                        <div class="checklist-inp">
                                            <input type="checkbox" id="src{{ $loop->index }}" name="publishers[]"
                                                value="{{ $item->publisher }}" />
                                            <label for="src{{ $loop->index }}">{{ $item->publisher }}</label>
                                        </div>
                                        @endforeach
                                        <div class="more">
                                            <button type="button" class="more-btn">
                                                <span>
                                                    <i class="fa-solid fa-plus"></i>
                                                    See More
                                                </span>
                                                <span>
                                                    <i class="fa-solid fa-minus"></i>
                                                    See Less
                                                </span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </form>

                </div>
            </div>

            <div class="col-lg-9">
                {{-- <div class="col-md-12">
                    <div class="car-sort">
                        @if (app()->getLocale() == "ar")
                        <h6>عرض 1-30 نتيجة</h6>
                        @endif

                        @if (app()->getLocale() == "en")
                        <h6>Showing 1-30 Results</h6>
                        @endif

                        @if (app()->getLocale() == "ar")
                        <div class="col-md-3 car-sort-box">
                            <select class="form-control" id="sort-select">
                                <option value="">
                                    الترتيب حسب
                                </option>

                                <option value="low">
                                    ترتيب السعر الادنى
                                </option>
                                <option value="high">
                                    ترتيب السعر الاعلى
                                </option>
                            </select>
                        </div>
                        @endif

                        @if (app()->getLocale() == "en")
                        <div class="col-md-3 car-sort-box">
                            <select class="form-control" id="sort-select">
                                <option value="">Sort by</option>

                                <option value="low">
                                    Sort By Low Price
                                </option>
                                <option value="high">
                                    Sort By High Price
                                </option>
                            </select>
                        </div>
                        @endif
                    </div>
                </div> --}}

                <div class="col-lg-12 col-12">
                    <div class="row py-4">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-6 text-left">
                            <h2 class="site-title site-title_custom">
                                News
                            </h2>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-6 text-right position-relative">
                            <div class="see_all_div see_all_div_custom"></div>
                        </div>
                    </div>
                </div>

                <div id="filterResult">
                    @foreach ($newsItems as $news)
                    <div class="News-Card-List">
                        <div class="inner-news-card col-12">
                            <div class="news-info">
                                <a href="{{route('site.new.show', ['id' => $news->id, 'title' => str_replace(' ', '-', $news->title)]) }}"
                                    class="img-container">
                                    <img src="{{ $news['image'] && $news['image'] !== '' ? $news['image'] : asset('end-user/bkamthis.png') }}"
                                        alt="{{ $news['title'] }}"   loading="lazy" />
                                </a>
                                <div class="controls">
                                    <a href="#" @guest onclick="swal('Please login first')" @endguest class="add-new-to-favorites" data-new-id="{{ $news->id }}">
                                        <button type="button">

                                            <i class="fa-regular fa-heart"></i>
                                            <span>
                                                {{ $news->favorites->count() }}
                                            </span>

                                        </button>
                                    </a>
                                    <a
                                        href="{{route('site.new.show', ['id' => $news->id, 'title' => str_replace(' ', '-', $news->title)]) }}">
                                        <i class="fa-regular fa-message"></i>
                                        <span>
                                            {{ $news->comments->count() }}
                                        </span>

                                    </a>
                                    <button type="button"
                                        onclick="share_news('{{route('site.new.show', ['id' => $news->id, 'title' => str_replace(' ', '-', $news->title)]) }}')">
                                        <i class="fa-solid fa-share-nodes"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="news-details">
                                <a href="{{route('site.new.show', ['id' => $news->id, 'title' => str_replace(' ', '-', $news->title)]) }}"
                                    class="title">
                                    {{ $news['title'] }}
                                </a>
                                <p class="description">
                                    {{ $news['des'] }}
                                </p>

                                <div class="magazine">
                                    <span class="icon">
                                        <i class="fa-solid fa-bolt"></i>
                                    </span>
                                    <a href="{{ $news['link'] }}" target="_blank" class="m_src">{{ $news['domain']
                                        }}</a>
                                    <div class="writer">{{ $news['publisher'] ?? 'bkamthis' }}</div>
                                    @php
                                    $date = $news['date'];


                                    if (is_numeric($date)) {
                                    $parsedDate = \Carbon\Carbon::createFromTimestamp($date);
                                    }else{
                                        $parsedDate = \Carbon\Carbon::parse($date);
                                    }
                                    @endphp
                                    <p class="date"> {{ $parsedDate->diffForHumans() }}</p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <br>
                    @endforeach
                </div>


                <!-- pagination -->
                {{ $newsItems->links() }}
                <!-- pagination end -->
            </div>
        </div>
    </div>
    </div>
    <!-- car area end -->
</main>
@endsection

@push("js")
<script>
    $(document).ready(function () {
            $('.checklists-container').each(function () {
                const maxView = 4;
                const $this = $(this);
                const $moreBTN = $this.find('.more-btn');
                let $checks = $this.find('.checklist-inp');
                let show = false;

                $moreBTN.click(function () {
                    show = !show;
                    $(this).toggleClass('more', show);
                    toggle_view();
                });

                function toggle_view() {
                    $checks.each(function (index) {
                        if (index >= maxView) {
                            if (show) {
                                $(this).removeClass('d-none');
                            } else {
                                $(this).addClass('d-none');
                            }
                        }
                    });
                }
                toggle_view();
            });
        });
</script>

<script>
    function share_news(route) {
            if (navigator.share) {
                navigator
                    .share({
                        title: document.title,
                        text: 'Check out this news!',
                        // TODO: Add object id here
                        url: route,
                    })
                    .then(() => {
                        console.log('Thanks for sharing!');
                    })
                    .catch(console.error);
            }
        }
</script>
<script>
    $(document).ready(function() {
    $('#filterForm input').on('change', function() {
        fetchFilteredNews();
    });

    $('#search_key').on('keyup', function() {
        fetchFilteredNews();
    });

    function fetchFilteredNews() {
        var formData = $('#filterForm').serialize();

        $.ajax({
            url: "{{ route('site.news.filter') }}",
            type: 'GET',
            data: formData,
            success: function(response) {
                // Update the news list with the response
                $('#filterResult').html(response.html);
            },
            error: function(xhr) {
                console.log(xhr.responseText);
            }
        });
    }
});

</script>

@endpush