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

<section class="article p-t-0">
  <div class="container">
    <div class="h-top-title text-center p-b-30">
      <h1>@lang("frontend::lang.retail_info_1")</h1>
    </div>

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

    <!-- Article large  -->
    <div class="act-large p-t-0 p-b-50">
      <div class="row">
        @foreach ($data['retail']['data'] as $item_id => $item)
          @if (in_array($item_id,[0,1]))
            <div class="col-md-6">
              <a href="{{ mwz_route('frontend.retail_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>
                    <p>{!! !empty($item['detail']) ? $item['detail'] : "" !!}</p>
                  </div>
                </div>
              </a>
            </div>
          @endif
        @endforeach
      </div>
    </div>
    <!-- Article large  -->

    <!-- Article small  -->
    <div class="act-small p-t-0 p-b-0">
      <div class="row">
        @foreach ($data['retail']['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.retail_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>
                        <p>{!! !empty($item['detail']) ? $item['detail'] : "" !!}</p>
                      </div>
                    </div>
                  </div>
                </a>
              </div>
            @endif
        @endforeach
      </div>
    </div>

    <!-- Article small  -->


    <!-- Article 3 col  -->
    <div class="act-medium-3 p-t-0 p-b-50">
      <div class="row">
        @foreach ($data['retail']['data'] as $item_id => $item)
            @if (in_array($item_id,[6,7,8]))
              <div class="col-md-4">
                <a href="{{ mwz_route('frontend.retail_detail',[$item['slug_name']])}}l">
                  <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>
                      <p>{!! !empty($item['detail']) ? $item['detail'] : "" !!}</p>
                    </div>
                  </div>
                </a>
              </div>
            @endif
        @endforeach
      </div>
    </div>

    <!-- Article 3 col  -->

    <!-- Article large  -->
    <div class="act-large p-t-0 p-b-50">
      <div class="row">
        @foreach ($data['retail']['data'] as $item_id => $item)
          @if (in_array($item_id,[9,10]))
            <div class="col-md-6">
              <a href="{{ mwz_route('frontend.retail_detail',[$item['slug_name']])}}l">
                <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>
                    <p>{!! !empty($item['detail']) ? $item['detail'] : "" !!}</p>
                  </div>
                </div>
              </a>
            </div>
          @endif
        @endforeach
      </div>
    </div>
    <!-- Article large  -->

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