<!-- resources/views/home.blade.php -->
@extends('backend.layouts.app')
@section('title', 'Home Page')
@section('content')
    @php
        use Carbon\Carbon;
    @endphp
    <style>
        .darker-text {
            color: #333;
            /* Darker color (you can adjust this to your needs) */
        }

        .balance {
            color: black !important;
            font-weight: 500;
        }
    </style>
    <div class="container-fluid">
        <div class="row page-titles" style="padding:14px 10px" style="margin-right: -10px;margin-left: -10px;">
            <div class="col-md-5 align-self-center">
                <h4 class="text-themecolor">CarBaba Dashboard</h4>
            </div>
            <div class="col-md-7 align-self-center text-right">
                <div class="d-flex justify-content-end align-items-center">
                </div>
            </div>
        </div>
        <div class="row min-vh" style="margin-right: -10px;margin-left: -10px;">
            <div class="col-lg-3 col-sm-6 col-xs-12">
                <a href="{{ route('member') }}" class="card-link">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title text-uppercase">Member</h5>
                            <div class="d-flex align-items-center no-block m-t-20 m-b-10">

                                <div class="mr-auto text-left">
                                    <h4 class="text-muted darker-text" id="allMembers">All: {{ $memberCount }}</h4>
                                    <h4 class="text-success darker-text mt-3" id="activeMembers">Active:
                                        {{ $activeMemberCount }}</h4>
                                </div>
                                <h1><i class="fa-solid fa-users text-info"></i></h1>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-uppercase">Credits</h5>
                        <div class="d-flex align-items-center no-block m-t-20 m-b-10">

                            <div class="mr-auto text-left">
                                <h4 class="text-muted darker-text" id="totalBalance">All: {{ $totalBalance }}</h4>
                                <h4 class="text-success darker-text mt-3" id="activeMemberBalance">Active:
                                    {{ $activeMemberBalance }}</h4>
                            </div>
                            <h1><i class="fa-solid fa-wallet text-info"></i></h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-uppercase">Credits / Member</h5>
                        <div class="d-flex align-items-center no-block m-t-20 m-b-10">

                            <div class="mr-auto text-left">
                                <h4 class="text-muted darker-text" id="averageBalancePerMember">All:
                                    {{ $averageBalancePerMember }}</h4>
                                <h4 class="text-success darker-text mt-3" id="averageBalancePerActiveMember">Active:
                                    {{ $averageBalancePerActiveMember }}</h4>
                            </div>
                            <h1><i class="fa-solid fa-money-check-dollar text-info"></i></h1>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-uppercase">Leads Subscribed</h5>
                        <div class="d-flex align-items-center no-block m-t-20 m-b-10">

                            <div class="mr-auto text-left">
                                <h4 class="text-muted darker-text" id="totalLead">All: {{ $totalLead }}</h4>
                                <h4 class="text-success darker-text mt-3" id="activeMemberLead">Active:
                                    {{ $activeMemberLead }}</h4>
                            </div>
                            <h1><i class="fa-solid fa-users text-info"></i></h1>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-uppercase">Leads / Member</h5>
                        <div class="d-flex align-items-center no-block m-t-20 m-b-10">

                            <div class="mr-auto text-left">
                                <h4 class="text-muted darker-text" id="averageLeadsPerMember">All:
                                    {{ $averageLeadsPerMember }}</h4>
                                <h4 class="text-success darker-text mt-3" id="averageLeadsPerActiveMember">Active:
                                    {{ $averageLeadsPerActiveMember }}</h4>
                            </div>
                            <h1><i class="fa-solid fa-user text-info"></i></h1>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-uppercase">Areas / Subscribed</h5>
                        <div class="d-flex align-items-center no-block m-t-20 m-b-10">

                            <div class="mr-auto text-left">
                                <h4 class="text-muted darker-text" id="averageLeadsPerMember">All:
                                    {{ $totalMemberAreaSubscribed }}</h4>
                                <h4 class="text-success darker-text mt-3" id="averageLeadsPerActiveMember">Active:
                                    {{ $activeMemberAreaSubscribed }}</h4>
                            </div>
                            <h1><i class="fa-solid fa-chart-area text-info"></i></h1>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-uppercase">Areas / Member</h5>
                        <div class="d-flex align-items-center no-block m-t-20 m-b-10">

                            <div class="mr-auto text-left">
                                <h4 class="text-muted darker-text" id="averageLeadsPerMember">All: {{ $avgAreaPerMember }}
                                </h4>
                                <h4 class="text-success darker-text mt-3" id="averageLeadsPerActiveMember">Active:
                                    {{ $avgAreaPerActiveMember }}</h4>
                            </div>
                            <h1><i class="fa-solid fa-chart-area text-info"></i></h1>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-uppercase">SMS Balance</h5>
                        <div class="d-flex align-items-center no-block m-t-20 m-b-10">

                            <div class="mr-auto text-left">
                                <h4 class="text-muted darker-text">{{ $twilioBalance }}</h4>
                            </div>
                            <h1><i class="fa-solid fa-comment text-info"></i></h1>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text-uppercase">Closed Account</h5>
                        <div class="d-flex align-items-center no-block m-t-20 m-b-10">

                            <div class="mr-auto text-left">
                                <h4 class="text-muted darker-text" id="averageLeadsPerMember">{{ $closedMembers }}</h4>
                            </div>
                            <h1><i class="fa-solid fa-circle-xmark text-info"></i></h1>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-sm-6 col-xs-12">
                <a href="{{ route('subadmin') }}" class="card-link">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title text-uppercase">Total Salesman</h5>
                            <div class="d-flex align-items-center no-block m-t-20 m-b-10">

                                <div class="mr-auto text-left">
                                    <h4 class="text-muted darker-text">{{ $salemanCount }}</h4>
                                </div>
                                <h1><i class="icon-tag text-info"></i></h1>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            @php
                $jsonArray = json_decode($apiBalance->config_value, true);
            @endphp
            @if ($jsonArray != null)
                <div class="col-lg-3 col-sm-6 col-xs-12">
                    <a href="#!" class="card-link">
                        <div class="card">
                            <div class="card-body">
                                <div class="">
                                    <div class="mr-auto text-left">
                                        <span class="balance">
                                            {{ 'Account Type : ' . $jsonArray['AccountType'] }}
                                        </span>
                                        <br>
                                        <span class="balance">
                                            {{ 'Account Balance : ' . $jsonArray['AccountBalance'] }}
                                        </span>
                                        <br>
                                        <span class="balance">
                                            {{ 'Transaction Cost : ' . $jsonArray['TransactionCost'] }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endif

        </div>

        <!-- .row -->
        <div class="row" style="margin-right: -10px;margin-left: -10px;">
            {{-- <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex m-b-20 align-items-center">
                        <h5 class="card-title">User Registrations</h5>
                    </div>
                    <canvas id="myChart" style="height:352px !important;"></canvas>
                </div>
            </div>
        </div> --}}
            <div class="col-lg-4">
            </div>
        </div>
    </div>


    @push('custom-script')
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>



        <script>
            document.addEventListener('livewire:initialized', function() {
                Livewire.on('newEntry', (data) => {
                    // Handle new entry event
                    console.log('New entry received:', data);
                    // Refresh the dashboard
                    Livewire.dispatch('refresh');
                });
            });
        </script>
    @endpush
@endsection
