@extends('web.layouts.container')
@section('css')
    <style>
        html {
            scroll-behavior: smooth;
        }
    </style>
@endsection
@section('header')
    <section class="inner_header">
        <div class="inner_back">
            <img src="{{asset($detail->header_image)}}" alt="">
        </div>
    </section>
@endsection

@section('content')
    <section class="companies section_padding pb-0">
        <div class="container">
            <div class="section_head">
                <h3 class="text-uppercase">{{__('articles.head')}}</h3>
            </div>
        </div>
        <div class="text_back news_search">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <form action="" class="form">
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="form-group mr-4">
                                        <select class="year" name="year">
                                            <option value="">{{__('articles.year')}}</option>
                                            @if(count($dates))
                                                @foreach($dates as $date)
                                                    <option {{(session('year')) == $date ? 'selected' : ''}} value="{{$date}}">{{$date}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-5">
                                    <div class="form-group mx-4">
                                        <select class="company" name="company">
                                        <!--<option value="">{{__('articles.company')}}</option>-->
                                            <option value="">{{__('articles.all')}}</option>
                                            @if(count($companies))
                                                @foreach($companies as $company)
                                                    @if($company->id == 42) @continue @endif
                                                    <option {{(session('company')) == $company->id ? 'selected' : ''}} value="{{$company->id}}">{{$company->name}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-5">
                                    <form action="{{route('news.index')}}" method="get" class="search_form">
                                        <div class="form-group mx-4">
                                            <input name="search" value="{{session('search')}}" class="input_line search_input" type="text" placeholder="{{__('articles.search')}}">
                                            <button class="search_btn search_button"><i class="fas fa-search"></i></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @if(count($page))
            <div class="companies_content news_content">
                <div class="container">
                    <div class="content news_container">
                        @foreach($page as $news)
                            <div class="items">
                                <span class="clss"></span>
                                <div class="img_btn">
                                    <div class="date_logo">
                                        <span>
                                            <span class="date">{{ucfirst(__('articles.'.$news->added_month))}}</span>
                                            <span class="date">{{ transYear($news->added_year)}}</span>
                                        </span>
                                        <img src="{{asset($news->company_image ?? $news->company_logo)}}" alt="" class="news_logo">
                                    </div>
                                    <div class="new_title">
                                        <h5>{{stripText($news->title, 35)}}</h5>
                                    </div>
                                </div>
                                <div class="company_info news_info">
                                    <div class="container">
                                        <div class="cont">
                                            <div class="row">
                                                <div class="col-sm-4">
                                                    <div class="item_logo">
                                                        <img src="{{asset($news->image)}}" alt="">
                                                    </div>
                                                </div>
                                                <div class="col-sm-8">
                                                    <div class="info">
                                                        <h5>{{$news->title}}</h5>
                                                        <small class="date text-uppercase">{{ucfirst(__('articles.'.$news->added_month)) . ' ' . transYear($news->added_year)}}</small>
                                                        <p>{!! $news->description !!}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--<span class="cls"> <i class="fas fa-times"></i> {{__('main.close')}}</span>-->
                                            <span class="cls"> <i class="fas fa-times"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="pagination text-center mt-2">
                    {{$page->links('web.new_press_kits.pagination.paginate', ['paginator' => $page])}}
                </div>
            </div>
        @else
            <div class="container">
                <div class="alert alert-secondary text-danger text-center">{{__('main.no_data')}}</div>
            </div>
        @endif

    </section>
@endsection

@section('inner_js')
    <script>

        let baseUrl = "{{route('news.index')}}";

        // $('.search_button').click(async function (e) {
        //     e.preventDefault();
        //     let form = $(this).parents('.search_form');
        //     let data = new FormData(form[0]),
        //         url = form.attr('action'),
        //         method = form.attr('method');
        //
        //     const response=await ajax({
        //         url,
        //         data,
        //         dataType: 'html',
        //         method,
        //         contentType: false,
        //         processData: false,
        //     });
        //
        //     if (response.errors) {
        //         toasterError(response.errors);
        //     }
        // });

        $('select[name="year"], select[name="company"]').change(function () {
            let year = $('select[name="year"]').val(), company = $('select[name="company"]').val();
            year ='?year='+year;
            company = '&company='+company;
            window.location.href = baseUrl+year+company;
        });


        // $('select').change(function () {
        //     let selectVal = $(this).val();
        //     if(selectVal !== ''){
        //         $('.items').addClass('d-none');
        //         $('.items').each(function () {
        //             if($(this).hasClass('new_'+selectVal) || $(this).hasClass('company_'+selectVal)){
        //                 $(this).removeClass('d-none');
        //             }
        //         });
        //     } else {
        //         $('.items').removeClass('d-none');
        //     }
        // });

        // $('.search_input').keyup(function () {
        //     searchNews($(this))
        // });

        // $('.search_btn').click(function (e) {
        //     e.preventDefault();
        //     searchNews($('.search_input'))
        // });

        function searchNews(selector){
            $('.items').addClass('d-none');
            let searchText = $(selector).val();
            $('.items').each(function () {
                if($(this).html().search(searchText) > -1){
                    $(this).removeClass('d-none');
                }
            });
        }

        // $(document).on("click", '.companies_content .content .items .img_btn', function() {
        //     var infoOfset = $(this).parent().offset().left,
        //         contOfset = $(".container").offset().left;
        //     $(this).addClass("plus").parent().siblings().find(".img_btn").removeClass("plus");

        //     $(this).siblings(".company_info").css({
        //         left: -infoOfset
        //     });

        //     $(".company_info").removeClass("show");
        //     $(this).siblings(".company_info").addClass("show");
        // });

        // $(document).on("click", '.companies_content .company_info .cls', function() {
        //     $(".company_info").removeClass("show");
        //     $(".company-logos .content .items").css({
        //         opacity: 1
        //     });
        //     $(".companies_content .content .items .img_btn").removeClass("plus");
        // })
    </script>
@endsection