@extends('master_layout.app')

@section('content')
    <style>
        /*-----Dashboard----*/
        .dash-card {
            background: var(--nf-mainnav-bg);
            padding: 0px;
            border-radius: 5px;
            height: 90px;
        }

        .card-hea {
            font-size: 14px;
            font-weight: 600;
        }

        .card-tex {
            color: #000 !important;
            font-size: 20px !important;
            font-weight: 600;
        }

        .truncate {
            font-size: 14px;
        }

        .dash-card-two {
            background: var(--nf-mainnav-bg);
            border-radius: 5px;
        }

        /*--filter--*/

        /* .regi-filter-btn {
                                                                                                                                                                                color: #000;
                                                                                                                                                                                padding: 0px 8px;
                                                                                                                                                                                position: relative;
                                                                                                                                                                                bottom: 0px;
                                                                                                                                                                                font-size: 14px;
                                                                                                                                                                            } */

        .regi-filter-btn {
            color: #000;
            position: relative;
            bottom: 0px;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 36px;
        }

        .ri-arrow-down-s-line {
            top: 2px;
            left: 8px;
            font-size: 16px;
            font-weight: 600;
        }

        .filter-hea {
            color: white;
            font-size: 18px;
            margin: 0px;
            padding: 0px;
            position: relative;
            top: 0px;

        }

        .filter-submit-btn {
            padding: 7px 40px !important;
            font-size: 14px;
        }

        select {
            font-size: 14px;
        }

        .custom_notification {
            display: none;
        }


        /* Sticky Button */
        .sticky-button {
            position: fixed;
            bottom: 100px;
            right: 20px;
            z-index: 1060;
        }

        .sticky-button button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }
    </style>

    {{-- my styles --}}

    <section id="content" class="content">
        <div class="content__header content__boxed overlapping">
            <div class="content__wrap">



                <div class="container-fluid">


                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <h4 class="mb-0 fw-semibold">Dashboard</h4>

                                <ol class="breadcrumb mb-0">

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

                    <div class="row">
                        <div class="col-md-12 col-xl-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row align-items-center justify-content-between">

                                        <div class="col-12">


                                            <div class="row">
                                                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12">
                                                    <div class="dash-card">
                                                        <div
                                                            class="px-4 py-3 d-flex justify-content-between align-items-center">
                                                            <div class="self-center">
                                                                <p class="card-hea mb-2">
                                                                    Monthly Recurring Revenue(MRR)</p>
                                                                <h3 class="card-tex" id="property_count">
                                                                    {{ $current_month_total_amount }}
                                                                </h3>
                                                            </div>
                                                            <div class="self-center icon flex-shrink-0">
                                                                <img src="/new_template/admin/assets/img/team.svg"
                                                                    class="img-fluid" style="max-width:40px;">
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>

                                                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12">

                                                    <div class="dash-card">
                                                        <div
                                                            class="px-4 py-3 d-flex justify-content-between align-items-center">
                                                            <div class="self-center">
                                                                <p class="card-hea mb-2">
                                                                    Active Subscriptions</p>
                                                                <h3 class="card-tex"><span
                                                                        id="total_gross_rental_income">{{ $active_subscription_list }}</span>
                                                                </h3>
                                                            </div>
                                                            <div class="self-center icon flex-shrink-0">
                                                                <img src="/new_template/admin/assets/img/team.svg"
                                                                    class="img-fluid" style="max-width:40px;">
                                                            </div>
                                                        </div>
                                                    </div>


                                                </div>

                                                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12">

                                                    <div class="dash-card">
                                                        <div
                                                            class="px-4 py-3 d-flex justify-content-between align-items-center">
                                                            <div class="self-center">
                                                                <p class="card-hea mb-2">
                                                                    Total Revenue</p>
                                                                <h3 class="card-tex" id="total_rentable_sf">$
                                                                    {{ number_format($total_amount, 2) }}</h3>
                                                            </div>
                                                            <div class="self-center icon flex-shrink-0">
                                                                <img src="/new_template/admin/assets/img/team.svg"
                                                                    class="img-fluid" style="max-width:40px;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12">
                                                    <div class="dash-card">
                                                        <div
                                                            class="px-4 py-3 d-flex justify-content-between align-items-center">
                                                            <div class="self-center">
                                                                <p class="card-hea mb-2">
                                                                    Total Transactions</p>
                                                                <h3 class="card-tex" id="total_vacent_sf">
                                                                    {{ $total_transaction }}</h3>
                                                            </div>
                                                            <div class="self-center icon flex-shrink-0">
                                                                <img src="/new_template/admin/assets/img/team.svg"
                                                                    class="img-fluid" style="max-width:40px;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12 mt-4">
                                                    <div class="dash-card">
                                                        <div
                                                            class="px-4 py-3 d-flex justify-content-between align-items-center">
                                                            <div class="self-center">
                                                                <p class="card-hea mb-2">
                                                                    Total Users</p>
                                                                <h3 class="card-tex"><span
                                                                        id="total_occupication_rate">{{ $user_list }}</span>
                                                                </h3>
                                                            </div>
                                                            <div class="self-center icon flex-shrink-0">
                                                                <img src="/new_template/admin/assets/img/team.svg"
                                                                    class="img-fluid" style="max-width:40px;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12 mt-4">
                                                    <div class="dash-card">
                                                        <div
                                                            class="px-4 py-3 d-flex justify-content-between align-items-center">
                                                            <div class="self-center">
                                                                <p class="card-hea mb-2">
                                                                    Renewal Expiry</p>
                                                                <h3 class="card-tex"><span
                                                                        id="total_noi">{{ $renewal_list }}</span></h3>
                                                            </div>
                                                            <div class="self-center icon flex-shrink-0">
                                                                <img src="/new_template/admin/assets/img/team.svg"
                                                                    class="img-fluid" style="max-width:40px;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12 mt-4">
                                                    <div class="dash-card">
                                                        <div
                                                            class="px-4 py-3 d-flex justify-content-between align-items-center">
                                                            <div class="self-center">
                                                                <p class="card-hea mb-2">
                                                                    Expired Subscriptions</p>
                                                                <h3 class="card-tex" id="expiration_within_year">
                                                                    {{ $expired_subscriber_list }}</h3>
                                                            </div>
                                                            <div class="self-center icon flex-shrink-0">
                                                                <img src="/new_template/admin/assets/img/team.svg"
                                                                    class="img-fluid" style="max-width:40px;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-12 col-md-3 col-lg-3 col-sm-12 col-xs-12 mt-4">
                                                    <div class="dash-card">
                                                        <div
                                                            class="px-4 py-3 d-flex justify-content-between align-items-center">
                                                            <div class="self-center">
                                                                <p class="card-hea mb-2">Trial Users</p>
                                                                <h3 class="card-tex"><span
                                                                        id="total_users">{{ $trial_list }}</span>
                                                                </h3>
                                                            </div>
                                                            <div class="self-center icon flex-shrink-0">
                                                                <img src="/new_template/admin/assets/img/team.svg"
                                                                    class="img-fluid" style="max-width:40px;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
                                        <!-- end col -->

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

                    </div>

                    <div class="modal fade" id="delete-subscribe" tabindex="-1" aria-labelledby="exampleModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">

                                <div class="modal-body">
                                    <p class="model-tit text-center">Are you sure you want to delete?</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary">Yes, Delete</button>
                                    <button type="button" class="btn btn-success" data-bs-dismiss="modal">No,
                                        Cancel</button>

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




                </div>


            </div>



        </div>

        <!-- FOOTER -->



        <!-- END - FOOTER -->


    </section>
@endsection