@extends('admin.layouts.layout')

@section('content')

<div class="page-container">

    <div class="row row-cols-xxl-4 row-cols-md-2 row-cols-1">
        <div class="col">
            <div class="card">
                <div class="d-flex card-header justify-content-between align-items-center">
                    <div>
                        <h4 class="header-title">Total Application</h4>
                    </div>
                </div>

                <div class="card-body pt-0">
                    <div class="d-flex align-items-end gap-2 justify-content-between">
                        <div class="text-end">
                            <h3 class="fw-semibold">{{$applications}}</h3>
                        </div>
                    </div>
                    <div class="progress progress-soft progress-sm mt-3" style="background-color: #ff5b5b21">
                        <div class="progress-bar" role="progressbar" style="width: {{$applications}}%; background-color: #ff5b5b;" aria-valuenow="{{$applications}}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div><!-- end col -->

        <div class="col">
            <div class="card">
                <div class="d-flex card-header justify-content-between align-items-center">
                    <div>
                        <h4 class="header-title">Total Revenue</h4>
                    </div>
                </div>

                <div class="card-body pt-0">
                    <div class="d-flex align-items-center gap-2 justify-content-between">
                        <div class="text-end">
                            <h3 class="fw-semibold">Rs. {{$totalPayments}}</h3>
                        </div>
                    </div>

                    <div class="progress progress-soft progress-sm mt-3">
                        <div class="progress-bar bg-success" role="progressbar" style="width: {{$totalPayments}}%" aria-valuenow="{{$totalPayments}}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div><!-- end col -->

        <div class="col">
            <div class="card">
                <div class="d-flex card-header justify-content-between align-items-center">
                    <div>
                        <h4 class="header-title">Total Users</h4>
                    </div>
                </div>

                <div class="card-body pt-0">
                    <div class="d-flex align-items-end gap-2 justify-content-between">
                        <div class="text-end">
                            <h3 class="fw-semibold">{{$users}}</h3>
                        </div>
                    </div>
                    <div class="progress progress-soft progress-sm mt-3">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: {{$users}}%" aria-valuenow="{{$users}}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div><!-- end col -->

        <div class="col">
            <div class="card">
                <div class="d-flex card-header justify-content-between align-items-center">
                    <div>
                        <h4 class="header-title">Total Site</h4>
                    </div>
                </div>

                <div class="card-body pt-0">
                    <div class="d-flex align-items-center gap-2 justify-content-between">
                        <div class="text-end">
                            <h3 class="fw-semibold">{{$sites}}</h3>
                        </div>
                    </div>

                    <div class="progress progress-soft progress-sm mt-3">
                        <div class="progress-bar bg-info" role="progressbar" style="width: {{$sites}}%" aria-valuenow="{{$sites}}" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div><!-- end col -->

    </div><!-- end row -->

    <div class="row">
        <div class="col-xxl-12 col-xl-12">
            <div class="card">
                <div class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
                    <h4 class="header-title">Monthly Revenue</h4>
                </div>

                <div class="card-body p-0 pt-1">
                    <div dir="ltr" class="px-1">
                        <div id="statistics-chart" class="apex-charts" data-colors="#5b69bc,#10c469,#fa5c7c,#f9c851"></div>
                    </div>

                    <div class="border-top border-dashed mt-2">
                        <div class="row text-center align-items-center g-0">
                            <div class="col-md-6 col-6">
                                <p class="text-muted mt-3 mb-1">Revenue</p>
                                <h4 class="mb-3">
                                    <span>Rs. {{$totalPayments}}</span>
                                </h4>
                            </div>
                            <div class="col-md-6 col-6 border-start border-end border-dashed">
                                <p class="text-muted mt-3 mb-1">Expenses</p>
                                <h4 class="mb-3">
                                    <span>Rs. {{$totalExpenses}}</span>
                                </h4>
                            </div>
                        </div>

                    </div>

                </div>
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div> <!-- end row-->
</div> <!-- container -->

@endsection

@section('foore-script')

<script>
  
</script>
@endsection