@extends('layouts.master')

@section('page-content')
    <div class="title-bar">
        <h1 class="title-bar-title">
            <span class="d-ib">Quick Overview</span>
        </h1>
    </div>
    <div class="row gutter-xs">
        <div class="col-md-6 col-lg-3">
            <div class="card bg-primary">
                <div class="card-body">
                    <div class="media">
                        <div class="media-middle media-left">
                            <span class="bg-primary-inverse circle sq-48">
                                <span class="icon icon-user"></span>
                            </span>
                        </div>
                        <div class="media-middle media-body">
                            <h6 class="media-heading">Regions</h6>
                            <h3 class="media-heading">
                                <span class="fw-l">{{$regions}}</span>
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card bg-info">
                <div class="card-body">
                    <div class="media">
                        <div class="media-middle media-left">
                            <span class="bg-info-inverse circle sq-48">
                                <span class="icon icon-shopping-bag"></span>
                            </span>
                        </div>
                        <div class="media-middle media-body">
                            <h6 class="media-heading">Registered Members</h6>
                            <h3 class="media-heading">
                                <span class="fw-l">{{$members}}</span>
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card bg-warning">
                <div class="card-body">
                    <div class="media">
                        <div class="media-middle media-left">
                            <span class="bg-warning-inverse circle sq-48">
                                <!-- <span class="icon icon-inr"></span> -->
                               <img src="http://mumbaimaheshwari.com/img/samiti.jpeg" style="height: 33px;
                        width:33px;">
                        </div>
                        <div class="media-middle media-body">
                            <h6 class="media-heading">Samiti</h6>
                            <h3 class="media-heading">
                                <span class="fw-l"> {{$samiti}}</span>
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="card bg-info">
                <div class="card-body">
                    <div class="media">
                        <div class="media-middle media-left">
                            <span class="bg-info-inverse circle sq-48">
                                <span class="icon icon-clock-o"></span>
                            </span>
                        </div>
                        <div class="media-middle media-body">
                            <h6 class="media-heading">Events</h6>
                            <h3 class="media-heading">
                                <span class="fw-l">{{$events}}</span>
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr class="no_line" style="margin: 0 auto 20px auto"> </div>
    <div class="col-xs-12">
        <div class="row">
            <div class="col-xs-12">
                <table id="demo-datatables-111" class="table table-striped table-nowrap table-bordered dataTable" cellspacing="0" width="100%">
                    <thead>
                      <tr>
                        <th>Type</th>
                        <th>All Member</th>
                        <th>Active</th>
                        <th>Inactive (Death)</th>
                        <th>Inactive (Misconduct)</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>LM</td>
                        <td>9086</td>
                        <td>25</td>
                        <td>61</td>
                        <td>25</td>
                      </tr>
                      <tr>
                        <td>SW</td>
                        <td>42</td>
                        <td>46</td>
                        <td>61</td>
                        <td>2011</td>
                      </tr>
                      <tr>
                        <td>PM</td>
                        <td>45</td>
                        <td>96</td>
                        <td>61</td>
                        <td>201</td>
                      </tr>
                      <tr>
                        <td>NM</td>
                        <td>98</td>
                        <td>23</td>
                        <td>61</td>
                        <td>04</td>
                      </tr>
                      <tr>
                        <td>OM</td>
                        <td>45</td>
                        <td>28</td>
                        <td>61</td>
                        <td>25</td>
                      </tr>
                      <tr>
                        <td>Total</td>
                        <td>49</td>
                        <td>43</td>
                        <td>61</td>
                        <td>20</td>
                      </tr>
                    </tbody>
                </table>
            </div>
        </div>  
    </div>
@endsection