@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="{{ mwz_route('frontend.csr') }}">@lang('frontend::lang.csr_info_1')</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.csr_info_1')</h1>
            </div>

            @if (!empty($data['csr']['data']))
                @foreach ($data['csr']['data'] as $item_id => $item)
                    @if (in_array($item_id, [0]))
                        <div class="act-large">
                            <a href="{{ mwz_route('frontend.csr_detail', [$item['slug_name']]) }}">
                                <div class="row">
                                    <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
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endif
                @endforeach

                <div class="act-media p-t-80">
                    <div class="row">
                        @foreach ($data['csr']['data'] as $item_id => $item)
                            @if (in_array($item_id, [1, 2]))
                                <div class="col-md-6 d-flex">
                                    <a href="{{ mwz_route('frontend.csr_detail', [$item['slug_name']]) }}">
                                        <div class="col-md-6 p-0">
                                            @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 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-list">
                    <ul class="l-col-3" id="loadmore">
                        @foreach ($data['csr']['data'] as $item_id => $item)
                            @if (in_array($item_id, [3, 4, 5, 6, 7, 8]))
                                <li>
                                    <div class="list-item">
                                        <a href="{{ mwz_route('frontend.csr_detail', [$item['slug_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['name']) ? $item['name'] : '' }}</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['csr']['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['csr']['total_pages'] > 1)
                        <div class='btn-more-data' id="btn-more-data">
                            <a class="btn-more btn-m"
                                onclick="load_more({{ $data['csr']['count'] }});">@lang('frontend::lang.load_more')</a>
                        </div>
                    @endif
                </div>
            @endif
        </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_csr') }}",
                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