@extends('layouts.contractor-app')
@section('content')

    <div class="col-md-9 layout">
        <div class="row overall">
            <div class="col-md-4  ">
                <div class="orderBox">
                    <div>
                        <h2>To-Do Jobs</h2>
                        <h3>{{$data['to_do'] ?? ''}}</h3>
                    </div>
                    <div>
                        <figure>
                            <img src="{{asset('dashboard/images/progressicon.png')}}" class="img-fluid" alt="">
                        </figure>
                    </div>
                </div>
            </div>
            <div class="col-md-4  ">
                <div class="orderBox">
                    <div>
                        <h2>In-Progress Jobs</h2>
                        <h3>{{$data['in_progress'] ?? ''}}</h3>
                    </div>
                    <div>
                        <figure>
                            <img src="{{asset('dashboard/images/progressicon.png')}}" class="img-fluid" alt="">
                        </figure>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="orderBox">
                    <div>
                        <h2>Pending Jobs</h2>
                        <h3>{{$data['pending'] ?? ''}}</h3>
                    </div>
                    <div>
                        <figure>
                            <img src="{{asset('dashboard/images/pendingicon.png')}}" class="img-fluid" alt="">
                        </figure>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="orderBox">
                    <div>
                        <h2>Completed Jobs</h2>
                        <h3>{{$data['completed'] ?? ''}}</h3>
                    </div>
                    <div>
                        <figure>
                            <img src="{{asset('dashboard/images/completeicon.png')}}" class="img-fluid" alt="">
                        </figure>
                    </div>
                </div>
            </div>
        </div>

{{--        <div class="recentTable tablecard tablecard--contractor">--}}
{{--            <h2>New Estimation Request</h2>--}}
{{--            <table class="table table-responsive-lg">--}}
{{--                <thead class="thead-dark">--}}
{{--                    <tr>--}}
{{--                        <th scope="col">Job Title</th>--}}
{{--                        <th scope="col">Categories</th>--}}
{{--                        <th scope="col">Date</th>--}}
{{--                        <th scope="col">Status</th>--}}
{{--                        <th scope="col">Action</th>--}}
{{--                    </tr>--}}
{{--                </thead>--}}
{{--                <tbody>--}}
{{--     --}}
{{--                    <tr>--}}
{{--                        <td><img src="{{asset('dashboard/images/tableimg.jpg')}}" class="img-fluid roundedImg" alt="img"><span class="ml-2">Name here</span></td>--}}
{{--                        <td>Construction</td>--}}
{{--                        <td>31-09-2023</td>--}}
{{--                        <td>Pending</td>--}}
{{--                        <td>--}}
{{--                            <div class="dropdown">--}}
{{--                                <button class="dropdown-toggle actionBtn" type="button" data-toggle="dropdown" aria-expanded="false">--}}
{{--                                    <i class="fas fa-ellipsis-h"></i>--}}
{{--                                </button>--}}
{{--                                <div class="dropdown-menu">--}}
{{--                                    <a class="dropdown-item" href="#">Edit</a>--}}
{{--                                    <a class="dropdown-item" href="#">Delete</a>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </td>--}}
{{--                    </tr>--}}
{{-- --}}
{{--                </tbody>--}}
{{--            </table>--}}
{{--        </div>--}}
    </div>


@endsection