@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.ecom')}}">@lang('frontend::lang.ecom')</a></li>
      {{-- {{ mwz_route('frontend.ecom')}} --}}
    </ul>
  </div>
</div>

{{-- @dump( $data['ecom']); --}}
<section class="article p-t-0">
  <div class="container">
    <div class="h-top-title text-center p-b-30">
      <h1>@lang('frontend::lang.ecom')</h1>
    </div>

    {{-- show detail  --}}
    @if (!empty($data['ecom_detail']))
      <section class="p-t-0">
        <div class="container">
          {!! !empty($data['ecom_detail']['detail']) ? $data['ecom_detail']['detail'] : "" !!}
        </div>
      </section>
    @endif

    <!-- Article large  -->
    <div class="act-large p-t-0 p-b-50">
      @if (!empty($data['ecom']['data']))
        <div class="row">
          @foreach ($data['ecom']['data'] as $item_id => $item)
            @if (in_array($item_id,[0,1]))
              <div class="col-md-6">
                <a href="{{ mwz_route('frontend.ecom_detail',[$item['slug_name']])}}">
                  <div class="article-img">
                    @if (!empty($item['image']))
                      <img class="w-100" src="{{ asset($item['image']) }}">
                    @endif
                  </div>
                  <div class="detail">
                    <div class="inner p-t-30">
                      <h4>{{ !empty($item['name']) ? $item['name'] : "" }}</h4>
                      {!! !empty($item['detail']) ? $item['detail'] : "" !!}
                    </div>
                  </div>
                </a>
              </div>
            @endif
          @endforeach
        </div>
      @endif
    </div>
    <!-- Article large  -->

    <!-- Article small  -->
    @if (!empty($data['ecom']['data']))
      <div class="act-small p-t-0 p-b-0">
        <div class="row">
          @foreach ($data['ecom']['data'] as $item_id => $item)
              @if (in_array($item_id,[2,3,4,5]))
                <div class="col-md-6 d-flex p-b-50">
                  <a href="{{ mwz_route('frontend.ecom_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">
                          <h4>{{ !empty($item['name']) ? $item['name'] : "" }}</h4>
                          {!! !empty($item['detail']) ? $item['detail'] : "" !!}
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              @endif
          @endforeach
        </div>
      </div>
    @endif
    <!-- Article small  -->


    <!-- Article 3 col  -->
    @if (!empty($data['ecom']['data']))
      <div class="act-medium-3 p-t-0 p-b-50">
        <div class="row">
           @foreach ($data['ecom']['data'] as $item_id => $item)
            @if (in_array($item_id,[6,7,8]))
                <div class="col-md-4">
                  <a href="{{ mwz_route('frontend.ecom_detail',[$item['slug_name']])}}">
                    <div class="article-img">
                      @if (!empty($item['image']))
                        <img class="w-100" src="{{ asset($item['image']) }}">
                      @endif
                    </div>
                    <div class="detail">
                      <div class="inner p-t-20">
                        <h4>{{ !empty($item['name']) ? $item['name'] : "" }}</h4>
                        {!! !empty($item['detail']) ? $item['detail'] : "" !!}
                      </div>
                    </div>
                  </a>
                </div>
            @endif
          @endforeach
        </div>
      </div>
    @endif

    <!-- Article 3 col  -->

    <!-- Article large  -->
    @if (!empty($data['ecom']['data']))
      <div class="act-large p-t-0 p-b-50">
        <div class="row" id="loadmore">
          @foreach ($data['ecom']['data'] as $item_id => $item)
            @if (in_array($item_id,[9,10] ))
              <div class="col-md-6">
                <a href="{{ mwz_route('frontend.ecom_detail',[$item['slug_name']])}}">
                  <div class="article-img">
                    @if (!empty($item['image']))
                      <img class="w-100" src="{{ asset($item['image']) }}">
                    @endif
                  </div>
                  <div class="detail">
                    <div class="inner p-t-30">
                      <h4>{{ !empty($item['name']) ? $item['name'] : "" }}</h4>
                      {!! !empty($item['detail']) ? $item['detail'] : "" !!}
                    </div>
                  </div>
                </a>
              </div>
            @endif
          @endforeach
        </div>
      </div>
    @endif
    <!-- Article large  -->

    <!-- Article small  -->
    @if (!empty($data['ecom']['data']))
      <div class="act-small p-t-0 p-b-50">
        <div class="row" id="loadmore">
          {{-- @foreach ($data['ecom']['data'] as $item_id => $item)
            @if ($item_id > 10)
              <div class="col-md-6 d-flex p-b-50">
                <a href="{{ mwz_route('frontend.ecom_detail',[$item['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">
                        <h4>{{ !empty($item['name']) ? $item['name'] : "" }}</h4>
                        {!! !empty($item['detail']) ? $item['detail'] : "" !!}
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            @endif
          @endforeach --}}
        </div> 
      </div>
    @endif
    {{-- @dump($data['ecom']); --}}
    <input type="hidden" name="row" id='row' value={{$data['ecom']['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['ecom']['total_pages'] > 1)
          <div class ='btn-more-data' id = "btn-more-data">
            <a class="btn-more btn-m" onclick="load_more({{$data['ecom']['count']}});">@lang('frontend::lang.load_more')</a>
          </div>
        @endif
    <!-- Article small  -->
    {{-- <a class="btn-more btn-m" href="#">@lang('frontend::lang.load_more')</a> --}}
  </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_ecom') }}",
         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