@extends('layouts.apps')
@section('content')
<style>
   .card-counter{
    box-shadow: 2px 2px 10px #DADADA;
    margin: 5px;
    padding: 20px 10px;
    background-color: #fff;
    height: 100px;
    border-radius: 5px;
    transition: .3s linear all;
  }
  .card-counter i{
    font-size: 3em;
    opacity: 0.2;
  }
  .card-counter:hover{
    box-shadow: 4px 4px 20px #DADADA;
    transition: .3s linear all;
  }
  .card-counter .count-numbers{
    font-size: 40px;
    float:right;

  }
  .card-counter .count-name{
    font-size: 15px;
    height: 50%;
    margin-top: 20px;
   
  }

  .card-counter.low{
    background: linear-gradient(346deg, rgb(5, 151, 151) 0%, rgb(204, 204, 204) 100%);
    color: #FFF;
  }  
  
</style>
<div>
<div class="col-sm-12 text-left ">
   <h1 class="border-bottom border-bot pt-3 ">Dashboard</h1>
</div>
<div class="main-wrapper col-sm-12 text-left h-100  pr-0 pl-0 pt-2  overflow-y: auto;" >
<div class="row mb-0">
   <div class="col-md-3">
      <div class="card-counter low">
        <i class="fa fa-users"></i>
        <span class="count-numbers" >{{ $registered  ?? '0'}}</span>
        <span class="count-name">Residents</span>
      </div>
    </div>

    <div class="col-md-3">
      <div class="card-counter low">
        <i class="fa fa-male"></i>
        <span class="count-numbers" >{{ $male  ?? '0'}}</span>
        <span class="count-name">Male</span>
      </div>
    </div>

    <div class="col-md-3">
      <div class="card-counter low">
        <i class="fa fa-female"></i>
        <span class="count-numbers">{{ $female  ?? '0'}}</span>
        <span class="count-name">Female</span>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="card-counter low">
        <i class="fa fa-archive"></i>
        <span class="count-numbers">{{ $voter  ?? '0'}}</span>
        <span class="count-name">Voters</span>
      </div>
    </div>
    
    <div class="col-md-3 mb-3">
      <div class="card-counter low">
        <i class="fa fa-blind"></i>
        <span class="count-numbers">{{ $senior  ?? '0'}}</span>
        <span class="count-name">Seniors</span>
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <div class="card-counter low">
        <i class="fa fa-child"></i>
        <span class="count-numbers">{{ $youth  ?? '0'}}</span>
        <span class="count-name">Youth</span>
      </div>
    </div> <div class="col-md-3 mb-3">
      <div class="card-counter low">
        <i class="fa fa-wheelchair"></i>
        <span class="count-numbers">{{ $pwd  ?? '0'}}</span>
        <span class="count-name">PWD</span>
      </div>
    </div> <div class="col-md-3 mb-3">
      <div class="card-counter low">
        <i class="fa fa-window-close-o"></i>
        <span class="count-numbers">{{ $nvoter  ?? '0'}}</span>
        <span class="count-name">Not Voters</span>
      </div>
    </div>
</div>


<div class="row  pl-2 pr-2">
   <div class="col-sm-8">
      <div class="table-responsive border">
         <div class="col-sm-12  text-dark pt-2 pb-2 text-left dashboard-margin" style="background: linear-gradient(135deg, #fffefe,#ebecec, #16beca,#000000);">
            <h3 class="mb-0"><b>Barangay  Current Member</b></h3>
         </div>
         <div class="table-container" style="height: 350px; overflow: scroll;">
          <style>td{text-align: left;}</style>
         <table class="table table-sm table-striped jambo_table bulk_action text-center">
            <thead>
               <tr class="headings" style="background: linear-gradient(135deg, #0b0d0e,#000000);">
                  <th class="column-title">Name </th>
                  <th class="column-title">Position </th>
                  <th class="column-title">Year of Services </th>


                  </th>
                  <th class="bulk-actions" hidden colspan="7">
                     <a class="antoo" style="color:#fff; font-weight:500;">Bulk Actions ( <span class="action-cnt"> </span> ) <i class="fa fa-chevron-down"></i></a>
                  </th>
               </tr>
            </thead>
            <tbody>
                @if(count($brgy_official))
                @foreach ($brgy_official as $brgy_official)
                <tr class="even pointer">


                  <td class=" ">{{ $brgy_official->name }}</td>
                  <td class=" ">{{ $brgy_official->position }}</td>
                  <td class=" ">{{ $brgy_official->year_of_service }}</td>


               </tr>
               @endforeach
               @endif

            </tbody>
         </table>
      </div>
    </div>
   </div>
   <div class="col-sm-4">
      <div class="table-responsive border text-center">
         <div class="col-sm-12 text-dark pt-2 pb-2 text-left" style="background: linear-gradient(135deg, #fffefe,#ebecec, #16beca,#000000);">
            <h3 class="mb-0"><b>Areas/Puroks</b></h3>
         </div>
         <div class="table-container" style="height: 350px; overflow: scroll;">
         <table class="table table-sm table-striped jambo_table ">
            <thead>
               <tr class="headings" style="background: linear-gradient(135deg,  #121616,#000000);">
                  <th class="column-title">Area </th>
                  <th class="column-title">People </th>
               </tr>
            </thead>
            
            <tbody>
                @if(count($area_setting))
                @foreach ($area_setting as $area_setting)
                <tr class="even pointer">


                  <td class=" ">{{ $area_setting->area }}</td>
                  <td class=" ">{{ $area_setting->population ?? '0'}}</td>



               </tr>
               @endforeach
               @endif
            </tbody>
         </table>
         </div>
      </div>
   </div>
</div>
@endsection
<script>
   $('.num').each(function () {
     $(this).prop('Counter',0).animate({
         Counter: $(this).text()
     }, {
         duration: 3000,
         easing: 'swing',
         step: function (now) {
             $(this).text(Math.ceil(now));
         }
     });
 });
 </script>