@extends('layouts.app')

@section('title', 'Dashboard')

@push('stylesheets')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     
     <script type="text/javascript" src="https://sdk.monnify.com/plugin/monnify.js"></script>
     <script type="text/javascript" src="{{ asset('js/api/monnify.js') }}"></script>
@endpush

@section('content')
    <!-- Page header start -->
    <div class="page-header">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">Dashboards</li>
            <li class="breadcrumb-item active">Admin Dashboard</li>
        </ol>

        <ul class="app-actions">
            <li>
                <a href="#" id="reportrange">
                    <span class="range-text"></span>
                    <i class="icon-chevron-down"></i>   
                </a>
            </li>
            <li>
                <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Print">
                    <i class="icon-print"></i>
                </a>
            </li>
            <li>
                <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="Download CSV">
                    <i class="icon-cloud_download"></i>
                </a>
            </li>
        </ul>
    </div>
    <!-- Page header end -->

    <!-- Main container start -->
    <div class="main-container">
        <!-- Row starts -->
        <div class="row gutters">
            <div class="col-xl-12 col-lg-8 col-md-8 col-sm-8 col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Overview</div>
                    </div>
                    <div class="card-body">

                        <!-- Row starts -->
                        <div class="row gutters">
                             <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12">
                                <div class="ticket-status-card">
                                    <h6>Total Tax Payers</h6>
                                    <h3>{{ $totalTaxpayers }}</h3>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12">
                                <div class="ticket-status-card">
                                    <h6>Total Tax Payers With Email</h6>
                                    <h3>{{ $totalWithEmail }}</h3>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12">
                                <div class="ticket-status-card">
                                    <h6>Total Tax Payers Without Email</h6>
                                    <h3>{{ $totalWithoutEmail }}</h3>
                                </div>
                            </div>

                            <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12">
                                <div class="ticket-status-card">
                                    <h6>Taxpayers added today</h6>
                                    <h3>{{ $totalToday }}</h3>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12">
                                <div class="ticket-status-card">
                                    <h6>Total records imported via Excel</h6>
                                    <h3>{{ $totalImported }}</h3>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12">
                                <div class="ticket-status-card">
                                    <h6>Total records added manually</h6>
                                    <h3>{{ $totalManual }}</h3>
                                </div>
                            </div>
                        </div>
                        <!-- Row ends -->

                    </div>
                </div>
            </div>
        </div>
        <!-- Row ends -->

        <!-- Row starts -->
        <!-- <div class="row gutters">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">Payments</div>
                    </div>
                    <div class="card-body">
                        <div class="custom-btn-group" role="group">
                            <button type="button" class="btn btn-outline-primary btn-sm btn-rounded">Today</button>
                            <button type="button" class="btn btn-outline-primary btn-sm btn-rounded">Yesterday</button>
                            <button type="button" class="btn btn-outline-primary btn-sm btn-rounded">Last Week</button>
                            <button type="button" class="btn btn-outline-secondary btn-sm btn-rounded">Month</button>
                        </div>
                        <div id="tickets"></div>
                    </div>
                </div>
            </div>
        </div> -->
        <!-- Row ends -->
    </div>
    <!-- Main container end -->
@endsection