@extends('layouts.superadmin.admin')

@section('title')
    Dashboard
@endsection

@section('content')
<style>
    .modal-content {
        width: 100% !important;
        height: auto !important;
    }
    .custom-form {
        border-radius: 4px !important;
        height: inherit;
        width: 100% !important;
    }
    .show-mobile {
        display: none;
    }
    @media screen and (min-width: 200px) and (max-width: 767px) {
        .hide-mobile {
            display: none;
        }
        .show-mobile {
            display: inline;
        }
    }

</style>
<div class="header mobile-mt-10">
    <div class="container-fluid">
        <div class="header-bod">
            <div class="row align-items-end">
                <div class="col">
                    <h4 class="fw-700">
                        Dashboard
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row ">
        <div class="col-12 col-lg-3 col-xl-3">
            <div class="card border-0 p-2 br-12">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <div class="d-flex">
                                <div class="text-center">
                                    <img src="{{asset('assets/images/group_icon.png')}}" alt="">
                                </div>
                                <div class="pl-2">
                                    <h6 class="text-muted mb-2">
                                        Total Tenants
                                    </h6>
                                    <span class="h4 fw-600 mb-0">
                                        {{number_format($total_tenants)}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3 col-xl-3">
            <div class="card border-0 p-2 br-12">
                <div class="card-body">
                    <div class="row align-items-center gx-0">
                        <div class="col">
                            <div class="d-flex">
                                <div class="text-center">
                                    <img src="{{asset('assets/images/users.png')}}" alt="">
                                </div>
                                <div class="pl-2">
                                    <h6 class="text-muted mb-2">
                                        Total Users
                                    </h6>
                                    <span class="h4 fw-600 mb-0">
                                        {{number_format($total_users)}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3 col-xl-3">
            <div class="card border-0 p-2 br-12">
                <div class="card-body">
                    <div class="row align-items-center gx-0">
                        <div class="col">
                            <div class="d-flex">
                                <div class="text-center">
                                    <img src="{{asset('assets/images/naira.png')}}" alt="">
                                </div>
                                <div class="pl-2">
                                    <h6 class="text-muted mb-2">
                                        Total Subscriptions
                                    </h6>
                                    <span class="h4 fw-600 mb-0">
                                        {{number_format($total_subscriptions, 2)}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-3 col-xl-3">
            <div class="card border-0 p-2 br-12">
                <div class="card-body">
                    <div class="row align-items-center gx-0">
                        <div class="col">
                            <div class="d-flex">
                                <div class="text-center">
                                    <img src="{{asset('assets/images/naira_type.png')}}" alt="">
                                </div>
                                <div class="pl-2">
                                    <h6 class="text-muted mb-2">
                                        Total Donations
                                    </h6>
                                    <span class="h4 fw-600 mb-0">
                                        {{number_format($total_donations, 2)}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="row mt-4">
        <div class="col-12 col-lg-6 col-xl-6">
            <div class="card border-0 p-2 br-12">
                <div class="card-body">
                    <div class="row align-items-center gx-0">
                        <div class="col">
                            <div class="d-flex">
                                <div class="text-center">
                                    <img src="{{asset('assets/images/invest_m.png')}}" alt="">
                                </div>
                                <div class="pl-2">
                                    <h6 class="text-muted mb-2">
                                        Total Investments
                                    </h6>
                                    <span class="h4 fw-600 mb-0">
                                        {{number_format($total_donations, 2)}}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="form-group">
                                <select name="validity" id="validity" class="form-select">
                                    <option value="day">Days</option>
                                    <option value="month">Months</option>
                                    <option value="year">Years</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row my-4">
                        <div class="col-12">
                            <img src="{{asset('assets/images/graph.png')}}" class="w-100" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 col-xl-6">
            <div class="card border-0 p-2 br-12">
                <div class="card-body">
                    <div class="row align-items-center gx-0">
                        <div class="col">
                            <div class="d-flex">
                                <div class="text-center">
                                    <img src="{{asset('assets/images/save.png')}}" alt="">
                                </div>
                                <div class="pl-2">
                                    <h6 class="text-muted mb-2">
                                        Total Savings
                                    </h6>
                                    <span class="h4 fw-600 mb-0">
                                        {{number_format($total_donations, 2)}}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="form-group">
                                <select name="validity" id="validity" class="form-select">
                                    <option value="day">Days</option>
                                    <option value="month">Months</option>
                                    <option value="year">Years</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row my-4">
                        <div class="col-12">
                            <img src="{{asset('assets/images/saving_graph.png')}}" class="w-100" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-12 col-lg-7 col-xl-7">
            <div class="card border-0 p-2 br-12">
                <div class="card-body">
                    <div class="row align-items-center gx-0">
                        <div class="col">
                            <div class="d-flex">
                                <div class="text-center">
                                    <img src="{{asset('assets/images/naira_type.png')}}" alt="">
                                </div>
                                <div class="pl-2">
                                    <h6 class="text-muted mb-2">
                                        Total Donations
                                    </h6>
                                    <span class="h4 fw-600 mb-0">
                                        {{number_format($total_donations, 2)}}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="form-group">
                                <select name="validity" id="validity" class="form-select">
                                    <option value="day">Days</option>
                                    <option value="month">Months</option>
                                    <option value="year">Years</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row my-4">
                        <div class="col-12">
                            <img src="{{asset('assets/images/donation_graph.png')}}" class="w-100" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-5 col-xl-5">
            <div class="card border-0 p-2 br-12">
                <div class="card-body">
                    <div class="row align-items-center gx-0">
                        <div class="col">
                            <div class="d-flex">
                                <div class="text-center">
                                    <img src="{{asset('assets/images/naira_g.png')}}" alt="">
                                </div>
                                <div class="pl-2">
                                    <h6 class="text-muted mb-2">
                                        Total Revenue
                                    </h6>
                                    <span class="h4 fw-600 mb-0">
                                        {{number_format($total_donations, 2)}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row my-4">
                        <div class="col-12">
                            <img src="{{asset('assets/images/total_rev.png')}}" class="w-100" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection