@extends('layouts.app')

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Dashboard</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{url('/dashboard')}}"><i class="fa fa-home"></i> Dashboard</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="clearfix"></div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-4 col-md-12">
                <div class="card text-white bg-info">
                    <div class="card-content">
                        <div class="card-body cleartfix">
                            <div class="media align-items-stretch">
                                <div class="align-self-center">
                                    <i class="icon-list font-large-2 mr-3  "></i>
                                </div>
                                <div class="media-body">
                                    <h5>Total News</h5>
                                    <span>published into App</span>
                                </div>
                                <div class="align-self-center">
                                    <h1>{{$newsCount}}</h1>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-md-12">
                <div class="card text-white bg-success">
                    <div class="card-content">
                        <div class="card-body cleartfix">
                            <div class="media align-items-stretch">
                                <div class="align-self-center ">
                                    <i class="icon-folder font-large-2 mr-3 "></i>
                                </div>
                                <div class="media-body">
                                    <h5>Total Categories</h5>
                                    <span>Active Categories</span>
                                </div>
                                <div class="align-self-center">
                                    <h1>{{$categoryCount}}</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-md-12">
                <div class="card text-white bg-danger">
                    <div class="card-content">
                        <div class="card-body cleartfix">
                            <div class="media align-items-stretch">
                                <div class="align-self-center ">
                                    <i class="icon-user font-large-2 mr-3 "></i>
                                </div>
                                <div class="media-body">
                                    <h5>Total Users</h5>
                                    <span>Registerd User</span>
                                </div>
                                <div class="align-self-center">
                                    <h1>{{$userCount}}</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <br>

    <div class="card">
        <div class="card-header no-border">
            <h3 class="card-title">News Created Recently</h3>
            <div class="card-tools">
                <a href="{{route('news.index')}}" class="btn btn-tool btn-sm"><i class="fa fa-bars"></i> </a>
            </div>
        </div>
        <div class="card-body p-0">
            <table class="table table-striped table-valign-middle">
                <thead>
                    <tr>
                        <th>Image</th>
                        <th>News Title</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($news as $newsItem)
                    <tr>
                        <td>
                            {!! getMediaColumn($newsItem, 'NewsImage','img-circle img-size-32 mr-2') !!}
                        </td>
                        <td>{!! $newsItem->title !!}</td>
                        <td class="text-center">
                            <a href="{!! route('news.edit',$newsItem->id) !!}" class="text-muted"> <i class="fa fa-edit"></i> </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</section>
@endsection