@extends('layouts.app.master')
@section('title', 'Dashboard')

@section('content')
<style>
/* table css start here */

</style>

<div id="kt_app_content_container" class="app-container container-fluid mt-5">
    <!--begin::Row-->

    <div class="row g-5 gx-xl-10 mb-5 mb-xl-10">

        <div class="col-lg-6">
            <div class="installations-row">
                <div class="installations-column">
                    <div class="total-installations-container">
                        <div class="total-installations-content">
                            <div class="total-installations-text">
                                <span>Total No. of</span>
                                <span class="instalation-sub">Installations</span>
                            </div>
                            <div class="total-installations-count">2500</div>
                        </div>
                        <div class="total-installations-image-container">

                            <div class="total-installations-progress-bar"></div>
                        </div>
                    </div>
                </div>
                <div class="installations-column-right">
                    <div class="monthly-installations-container">
                        <div class="monthly-installations-content">
                            <div class="monthly-installations-header">
                                <div class="monthly-installations-header-text">This Month - May</div>

                            </div>
                            <div class="monthly-installations-text">Installations check</div>
                            <div class="monthly-installations-count">05</div>
                            <div class="monthly-installations-progress-bar"></div>
                        </div>
                        <img alt="Logo" src="assets/images/hand-icon.png" class="monthly-installations-image">



                    </div>
                </div>
            </div>

        </div>

        <div class="col-lg-6">
            <div class="installations-row">
                <div class="installations-column">
                    <div class="total-installations-container">
                        <div class="total-installations-content">
                            <div class="total-installations-text">
                                <span>Total No. of</span>
                                <span class="instalation-sub">Installations</span>
                            </div>
                            <div class="total-installations-count">2500</div>
                        </div>
                        <div class="total-installations-image-container">

                            <div class="total-installations-progress-bar"></div>
                        </div>
                    </div>
                </div>
                <div class="installations-column-right">
                    <div class="monthly-installations-container">
                        <div class="monthly-installations-content">
                            <div class="monthly-installations-header">
                                <div class="monthly-installations-header-text">This Month - May</div>

                            </div>
                            <div class="monthly-installations-text">Installations</div>
                            <div class="monthly-installations-count">05</div>
                            <div class="monthly-installations-progress-bar"></div>
                        </div>
                        <img alt="Logo" src="assets/images/arrow-down-round-icon.png"
                            class="monthly-installations-image">



                    </div>
                </div>
            </div>

        </div>
    </div>


    <div class="row g-5 gx-xl-10 mb-5 mb-xl-10">



        <div class="col-lg-6">
            <div class="installations-row">
                <div class="installations-column">
                    <div class="total-installations-container">
                        <div class="total-installations-content">
                            <div class="total-installations-text">
                                <span>Total No. of</span>
                                <span class="instalation-sub">Installations</span>
                            </div>
                            <div class="total-installations-count">2500</div>
                        </div>
                        <div class="total-installations-image-container">

                            <div class="total-installations-progress-bar"></div>
                        </div>
                    </div>
                </div>
                <div class="installations-column-right">
                    <div class="monthly-installations-container">
                        <div class="monthly-installations-content">
                            <div class="monthly-installations-header">
                                <div class="monthly-installations-header-text">This Month - May</div>

                            </div>
                            <div class="monthly-installations-text">Installations</div>
                            <div class="monthly-installations-count">05</div>
                            <div class="monthly-installations-progress-bar"></div>
                        </div>
                        <img alt="Logo" src="assets/images/checklist-icon.png" class="monthly-installations-image">



                    </div>
                </div>
            </div>

        </div>

        <div class="col-lg-6">
            <div class="installations-row">
                <div class="installations-column">
                    <div class="total-installations-container">
                        <div class="total-installations-content">
                            <div class="total-installations-text">
                                <span>Total No. of</span>
                                <span class="instalation-sub">Installations</span>
                            </div>
                            <div class="total-installations-count">2500</div>
                        </div>
                        <div class="total-installations-image-container">

                            <div class="total-installations-progress-bar"></div>
                        </div>
                    </div>
                </div>
                <div class="installations-column-right">
                    <div class="monthly-installations-container">
                        <div class="monthly-installations-content">
                            <div class="monthly-installations-header">
                                <div class="monthly-installations-header-text">This Month - May</div>

                            </div>
                            <div class="monthly-installations-text">Installations</div>
                            <div class="monthly-installations-count">05</div>
                            <div class="monthly-installations-progress-bar"></div>
                        </div>
                        <img alt="Logo" src="assets/images/gard-icon.png" class="monthly-installations-image">



                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="row g-5 gx-xl-10 mb-5 mb-xl-10">
        <div class="col-lg-6">
            <div class="card Extended-Warranty-card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-10">
                            <div class="d-flex align-items-center">
                                <img src="assets/images/gard-icon.png" alt="" class="warranty-registrations-icon me-3"
                                    style="width: 51px;height: 51px;object-fit: contain;">
                                <h5 class="card-title mb-0">Total No Of Extended-Warranty Registrations</h5>
                            </div>
                        </div>
                        <div class="col-2">
                            <div class="d-flex flex-column align-items-end">
                                <h1 class="mb-0">06</h1>
                                <div class="progress mt-2" style="height: 8px; width: 100%;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%;"
                                        aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="col-lg-6">
            <div class="card Extended-Warranty-card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-10">
                            <div class="d-flex align-items-center">
                                <img src="assets/images/gard-icon.png" alt="" class="warranty-registrations-icon me-3"
                                    style="width: 51px;height: 51px;object-fit: contain;">
                                <h5 class="card-title mb-0">Total No Of Extended-Warranty Registrations</h5>
                            </div>
                        </div>
                        <div class="col-2">
                            <div class="d-flex flex-column align-items-end">
                                <h1 class="mb-0">06</h1>
                                <div class="progress mt-2" style="height: 8px; width: 100%;">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%;"
                                        aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection