@extends('layout')
@section('content')

<div class="container-fluid">
    <div class="row justify-content-center">
        
        <div class="col-lg-3 col-md-4 col-sm-12 mt-4">
            <!-- small box -->
            <div class="small-box" style="background-color: brown; color: #fff; border-radius: 10px;">
               
                <div class="inner">
                    <h2 style="margin: 0; font-size: 1.5rem; font-weight: bold;">Jobs</h2>
                    <h4 class="te mt-2">{{ $data['jobs']['last_added']['completed_at'] }}</h4>
                    <p>Last Job Added</p>
                    <h4 class="te">{{ $data['jobs']['completed'] }}</h4>
                    <p>Jobs Completed</p>
                    <h4 class="te">{{ $data['jobs']['in_progress'] }}</h4>
                    <p>Jobs In Progress</p>
                    <h4 class="te">{{ $data['jobs']['scheduled'] }}</h4>
                    <p>Jobs Scheduled</p>
                </div>
                
            </div>
           
        </div>

        <div class="col-lg-3 col-md-4 col-sm-12 mt-4">
            <!-- small box -->
            <div class="small-box bg-info" style="border-radius: 10px;">
                <div class="inner">
                    <h2 style="margin: 0; font-size: 1.5rem; font-weight: bold;">Postcodes</h2>
                    <h4 class="te mt-2">{{ $data['postcodes']['total'] }}</h4>
                    <p>Total Postcodes</p>
                    <h4 class="te">{{ $data['postcodes']['completed'] }}</h4>
                    <p>Postcodes Completed</p>
                    <h4 class="te">{{ $data['postcodes']['in_progress'] }}</h4>
                    <p>Postcodes in Progress</p>
                    <h4 class="te">{{ $data['postcodes']['not_completed'] }}</h4>
                    <p>Postcodes Not Completed</p>
                 
                </div>
              
            </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-12 mt-4">
            <!-- small box -->
            <div class="small-box bg-danger" style="border-radius: 10px;">

                <div class="inner">
                    <h2 style="margin: 0; font-size: 1.5rem; font-weight: bold;">Errors</h2>
                    <h4 class="te mt-2">{{ $data['errors']['reported'] }}</h4>
                    <p>Reported</p>
                    <h4 class="te">{{ $data['errors']['investigating'] }}</h4>
                    <p>Investigating</p>
                    <h4 class="te">{{ $data['errors']['completed'] }}</h4>
                    <p>Completed</p>
                </div>
                <div class="icon">
                    <i class="ion ion-bag"></i>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-12 mt-4">
            <!-- small box -->
            <div class="small-box" style="border-radius: 10px;background-color:rgb(0, 0, 0) ;color: #fff; ">
                <div class="inner">
                    <h2 style="margin: 0; font-size: 1.5rem; font-weight: bold;">Data</h2>
                    <h4 class="te mt-2">{{ $data['scrapped']['count'] }}</h4>
                    <p>Total Data</p>
                    <h4 class="te">{{ $data['scrapped']['created_at']['completed_at'] }}</h4>
                    <p>Last Data Scrapped</p>
                </div>
                <div class="icon">
                    <i class="ion ion-bag"></i>
                </div>
            </div>
        </div>
        
    </div>
</div>

<style>
    .te{
        font-weight: bold;
    }
   .small-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    max-height: 380px;   
    height: 380px;
    overflow: hidden;
   
    transition: all 0.3s ease-in-out;
} 
    .small-box:hover {
        transform: scale(1.05);
    }

    .inner {
        text-align: center;
        margin: 10px;
    }
    .row {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
</style>


@endsection