@extends('frontend::layouts.master')

@section('title')

@section('style')
    <style>
        .icon-reload {
            display: none;
        }

        .icon-reload.active {
            display: block;
        }
    </style>
@endsection

@section('content')

    <div class="breadcrumb text-center p-t-50">
        <div class="container">
            <ul class="bor-0">
                <li><a href="{{ mwz_route('frontend.index') }}"><i class="fa-solid fa-house"></i></a></li>
                <li><a href="/csr">@lang('frontend::lang.news_info_2')</a></li>
            </ul>
        </div>
    </div>
    <section class="privacy p-t-0">
        <div class="container">
            <div class="h-top-title text-center p-b-80">
                <h1>@lang('frontend::lang.news_info_3')</h1>
            </div>

            @foreach ($data['news']['data'] as $item_id => $item)
                @if (in_array($item_id, [0]))
                    <div class="act-large">
                        <a href="{{ mwz_route('frontend.news_detail', [$item['slug_name']]) }}">
                            <div class="row">
                                <div class="col-md-6">
                                    @if (!empty($item['image']))
                                        <img class="w-100" src="{{ asset($item['image']) }}">
                                    @endif
                                </div>
                                <div class="col-md-6 c-f">
                                    <div class="detail d-flex just-center">
                                        <div class="inner p-50">
                                            <p class="date">
                                                {{ !empty($item['publish_at']) ? date_Formate($item['publish_at']) : '' }}
                                            </p>
                                            <h3>{{ !empty($item['name']) ? $item['name'] : '' }}</h3>
                                            <p>{{ !empty($item['detail']) ? $item['detail'] : '' }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                @endif
            @endforeach

            <div class="act-medium p-t-50">
                <div class="row">
                    @foreach ($data['news']['data'] as $item_id => $item)
                        @if (in_array($item_id, [1, 2, 3, 4]))
                            <div class="col-md-6 d-flex p-b-50">
                                <a href="{{ mwz_route('frontend.news_detail', [$item['slug_name']]) }}">
                                    <div class="col-md-6 p-0">
                                        @if (!empty($item['image']))
                                            <div class="img">
                                            <img class="w-100" src="{{ asset($item['image']) }}">
                                            </div>
                                        @endif
                                    </div>
                                    <div class="col-md-6 c-f">
                                        <div class="detail d-flex just-center">
                                            <div class="inner">
                                                <p class="date">
                                                    {{ !empty($item['publish_at']) ? date_Formate($item['publish_at']) : '' }}
                                                </p>
                                                <h4>{{ !empty($item['name']) ? $item['name'] : '' }}</h4>
                                                <p>{{ !empty($item['detail']) ? $item['detail'] : '' }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>


            <div class="act-large">
                <div class="row">
                    @foreach ($data['news']['data'] as $item_id => $item)
                        @if (in_array($item_id, [5]))
                            <a href="{{ mwz_route('frontend.news_detail', [$item['slug_name']]) }}">
                                <div class="col-md-6 c-f">
                                    <div class="detail d-flex just-center">
                                        <div class="inner p-50">
                                            <p class="date">
                                                {{ !empty($item['publish_at']) ? date_Formate($item['publish_at']) : '' }}
                                            </p>
                                            <h3>{{ !empty($item['name']) ? $item['name'] : '' }}</h3>
                                            <p>{{ !empty($item['detail']) ? $item['detail'] : '' }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    @if (!empty($item['image']))
                                        <img class="w-100" src="{{ asset($item['image']) }}">
                                    @endif
                                    {{-- <img class="w-100" src="{{ Module::asset('frontend:img/news/n-1.jpg') }}"> --}}
                                </div>
                            </a>
                        @endif
                    @endforeach
                </div>
            </div>
            <div class="act-list">
                <ul class="l-col-3" id="loadmore">
                    {{-- @foreach ($data['news']['data'] as $item_id => $item)
          @if (in_array($item_id, [6, 7, 8, 9, 10, 11, 12, 13, 14]))
            <li>
              <div class="list-item">
                <a href="{{ mwz_route('frontend.news_detail',[$item['name']]) }}">
                  <div class="img">
                    @if (!empty($item['image']))
                      <img class="w-100" src="{{ asset($item['image']) }}">
                    @endif
                  </div>
                  <div class="detail text-center">
                    <div class="inner">
                      <p class="date">{{ !empty($item['publish_at']) ? date_Formate($item['publish_at']) : ""  }}</p>
                      <h4>{{ !empty($item['publish_at']) ? date_Formate($item['publish_at']) : ""  }}</h4>
                      <p>{{ !empty($item['detail']) ? $item['detail'] : "" }}</p>
                    </div>
                  </div>
                </a>
              </div>
            </li>
          @endif
        @endforeach --}}
                </ul>
                <input type="hidden" name="row" id='row' value={{ $data['news']['total_pages'] }}>
                <div class="col-12 text-center icon-reload"><img style='width: 20%;'
                        src="{{ URL::asset('assets\images\admin\Loading_icon.gif') }}" alt=""></div>
                @if ($data['news']['total_pages'] > 1)
                    <div class='btn-more-data' id="btn-more-data">
                        <a class="btn-more btn-m" onclick="load_more({{ $data['news']['count'] }});">@lang('frontend::lang.load_more')</a>
                    </div>
                @endif
                {{-- <a class="btn-more btn-m" href="#">@lang('frontend::lang.news_info_1')</a> --}}
            </div>

        </div>
    </section>

@endsection

@section('script')

    <script type="text/javascript">
        var page = 2;
        var pages_total = 1;
        if ($("#row").val() > 1) {
            $(window).on("load", function() {
                load_more()
            })
        }
        load_more = function() {
            $(".icon-reload").addClass('active');
            var _token = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                url: "{{ mwz_route('frontend.load_more_new') }}",
                type: 'POST',
                data: {
                    page: page,
                    _token: _token
                },
                success: function success(resp) {
                    pages_total = resp.pages_total;
                    page += 1;
                    $(".icon-reload").removeClass('active');
                    $("#loadmore").append(resp.res)
                    if (page > pages_total) {
                        $('#btn-more-data').addClass('d-none')
                    }
                }
            });
        }
    </script>

@endsection