@extends('frontend.layouts.app')
@section('address','active')
@section('content')
        <!-- ======= Intro Single ======= -->
    <section class="intro-single">
      <div class="container">
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="title-single-box">
              <h1 class="title-single">Our Sold Address </h1>
            </div>
          </div>
          <div class="col-md-12 col-lg-4">
            <nav aria-label="breadcrumb" class="breadcrumb-box d-flex justify-content-lg-end">
              <ol class="breadcrumb">
                <li class="breadcrumb-item">
                  <a href="{{ route('home') }}">Home</a>
                </li>
              </ol>
            </nav>
          </div>
        </div>
      </div>
    </section><!-- End Intro Single-->

    <!-- ======= Blog Single ======= -->
    <section class="news-single nav-arrow-b">
      <div class="container">
        <div class="row">
          <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">   
            <div class="post-content">
                            @if($post_addresses->count()>0)
                                <div class="infinite-scroll">
                                    @foreach($post_addresses as $post_address)
                                      <div class="card mb-4" style="height:100px;border-radius: 10px;box-shadow: 0 3px 4px rgba(0,0,0,0.09);border: none;">
                                        <div class="card-body p-2">
                                          <p>{{ $post_address->address}}</p>
                                        </div>
                                      </div> 
                                    @endforeach
                                    {{$post_addresses->links()}}
                                </div>
                            @else
                                  <p class=" text-center text-danger font-weight-bold">
                                        No record found!
                                  </p> 
                            @endif
            </div>
          </div>
        </div>
      </div>
    </section><!-- End Blog Single-->
@endsection
@push('script')
    <script src="{{ asset('frontend/assets/js/jscroll.jquery.js') }}"></script>
    <script>
        $('ul.pagination').hide();
          $(function() {
              $('.infinite-scroll').jscroll({
                  autoTrigger: true,
                  loadingHtml: `<img class="mx-auto d-block " src="{{ asset('frontend/assets/images/loading.gif') }}" alt="Loading..." />`,
                  padding: 0,
                  nextSelector: '.pagination li.active + li a',
                  contentSelector: 'div.infinite-scroll',
                  callback: function() {
                      $('ul.pagination').remove();
                  }
              });
              // $('form').submit(function() {
              //       // filter out each "tr" that does not have a qty value
              //       $('.display').filter(function() {
              //         return !$(this).find('input').val();
              //       }).remove();
              //     });
                  $('#myInput').on('keyup', function() {
                      if($(this).val().length) {
                        var keyword = $(this).val();
                          $.ajax({
                              url: '/address/search?address=' + keyword,
                              type: 'GET',
                              success: function(data) {
                                let htmlView = '';
                                if(data.status == 'success'){
                                  data.data.forEach((address) => {
                                    colsole.log(address)
                                  }) 
                                  let htmlView = `
                                  `
                                }
                                else{

                                }
                              }
                          })
                      }
                  })
            
            });
    </script>
@endpush