{{-- CityHub - Contact Page --}}

<style>
.ch-stat-widget{
  padding: 0px;
  width: 260px;
  border: 1px solid;
  margin: 15px;
}
.ch-stat-widget .image-back{
  background: url(https://beta.mycity-hub.com/img/signIn/newyork.jpg)no-repeat center center;
  background-size: cover;
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.33);
}
.ch-stat-widget .ch-desc{
  line-height: 1.3;
}
.ch-stat-widget img{
  width: 120px;
  padding: 15px 0 10px;
}
.ch-stat-widget h4 span{
  background: rgba(64, 64, 64, 0.61);
  padding: 5px 7px;
  border-radius: 3px;
}
.ch-stat-widget hr{
  margin: 17px 0px 2px;
  border-top: 1px solid #454545;
}
.city-stat-image-w{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.city-stat-desc-w p{
  font-size: 11px;
  line-height: 1.3;
  height: 27px;
  overflow: hidden;
}
.statistics-info-w{
  border: none;
  padding: 10px;
}
.date-w{
  height: 11px !important;
  margin-top: 3px;
  margin-bottom: 2px;
  color: #868585 !important;
}
.ch-stat-widget .ch-link{
  background: #2A2A2A;
  padding: 10px;
  position: relative;
  overflow: hidden;
  font-size: 12px;
}
.ch-stat-widget .ch-link img{
  position: absolute;
  left: 9%;
  bottom: -23px;
  width: 56px;
  transform: rotate(45deg);
  opacity: .2;
}
.statistics-info-w:nth-child(3){
  background: #403F3F;
}
.fl{
  float: left;
}
</style>




<div class="ch-stat-widget" style="margin-top: 30px; border: 1px solid #545454;">
  <div class="image-back" style="padding-top: 72px; position: relative; box-shadow: inset 0 0 0 100px rgba(105, 1, 0, 0.71);">
  <img src="https://beta.mycity-hub.com/img/core/cityhub-crest-200.png" alt="logo" style="position: absolute; bottom: -4px; opacity: .3; -webkit-filter: grayscale(1); filter: grayscale(1); left: 50%; margin-left: -40px; width: 80px;">
  <img src="https://beta.mycity-hub.com/img/core/cityhub-logo-h50.png" alt="logo" style="position: absolute; bottom: 50px; left: 90px; width: 80px;">
  <h4 style="position: absolute; left: 0; right: 0; text-align: center; bottom: 20px; line-height: 1.2;">Sustav za prijavu problema i komunikaciju s gradanima</h4>
    <hr>
  </div>
            @if(!empty($reports))
                    @foreach($reports as $report)
                    <div class="statistics-info-w">
                        <div class="city-stat-image-w fl" style="background:no-repeat center center; border: 1px solid #454545; background-size: cover; background-image:url({{ URL::to('/') }}/uploads/communalService/{{$report->image}}); border-radius: 0;">
                        </div>
                        <div class="city-stat-desc-w text-justify">
                                        @if($report->description)
                                             <p>{{$report->report_description }}</p>
                                        @else
                                            <p>
                                                {{$report->subtype }}
                                                -
                                                 {{$report->type }}
                                            </p>
                                        @endif
                                        <p class="date-w">{{$report->report_date  }}</p>
                            </div>
                    </div>
                    @endforeach
             @else
                     <h3>Nema prijava</h3>
            @endif
            <div class="ch-link">
              <img src="../../img/core/icon.png">
              <a href="https://mycity-hub.com/">mycity-hub.com</a>
            </div>
</div>