@extends('mobile.mobile-template')

@section('title', 'Home')

@section('css')

@endsection

@section('content')
<div class="content-wrap page-news-list">
    <div class="subsite-banner">
      <img src="{{app('App\Helpers\Images')->urlImage($imagePage->image, 'Image Page Mobile')}}">
    </div>
    <div class="subsite subsite-with-banner">
      <div class="row">
        <div class="col-md-12">
          <div class="subsite-heading">
            {{$title}}
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="search-form search-content">
            <div class="search-wrapper ">
              <form action="{{url()->current()}}" method="get">
                <input id="search" name="search" value="{{isset($_GET['search'])? $_GET['search'] : ''}}" placeholder="Cari Laporan...">
                <button class="ssubmit" type="submit" name="search_submit"> <i class="fas fa-search"></i></button>
              </form>
            </div>
          </div>
        </div>
      </div>

      @include('mobile.laporan-loop')

      
    </div>
    
  </div>

@endsection

@section('script')
<script>
  function dukung(laporan_id) {
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
    $.ajax({
      type: 'POST',
      url: "{{route('user.laporan.dukung')}}",
      data: {laporan_id: laporan_id}
    }).then(function(data){
      // boostrap_code
      var countDukungan = parseInt($("#countDukungan"+laporan_id).text());
      dukunganId = $("#btnDukungan"+laporan_id);
      countDukunganId = $("#countDukungan"+laporan_id);

      if (data.kode == '01') {
        dukunganId.addClass("btn-outline-secondary")
        dukunganId.removeClass("btn-outline-primary");
        countDukunganId.html(countDukungan - 1 )
      }else{
        // console.log(data)
        dukunganId.addClass("btn-outline-primary")
        dukunganId.removeClass("btn-outline-secondary");
        countDukunganId.html(countDukungan + 1 )
      }

    });
  }


// example for addding some-class to the element
</script>
@endsection