<?php include'header.php' ?>

<style>
/* ========================================
   PREMIUM COLORFUL DASHBOARD CARDS
======================================== */

.dashboard-card{
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,0.88);
    backdrop-filter:blur(12px);
    border-radius:16px;
    padding:22px 24px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid rgba(255,255,255,0.7);
    min-height:100px;
    width:100%;
    transition:all .3s ease;
    box-shadow: 0 8px 24px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.9);
}

.dashboard-card:hover{
    transform:translateY(-5px);
    box-shadow:
        0 18px 40px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,1);
}

/* Top Glow */
.dashboard-card::before{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    right:-40px;
    top:-40px;

    background:radial-gradient(
        circle,
        rgba(255,255,255,.55),
        transparent 70%
    );

    opacity:0;
    transition:.3s;
}

.dashboard-card:hover::before{
    opacity:1;
}

/* Bottom Gradient Border */
.dashboard-card::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;

    width:100%;
    height:4px;

    border-radius:20px;
    background:var(--card-accent);
}

/* ========================================
   ICON
======================================== */

.card-icon{
    width:42px;
    height:42px;
    min-width:42px;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    box-shadow:
        0 8px 18px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.4);
}

.card-icon iconify-icon{
    font-size:20px;
}

/* ========================================
   CONTENT
======================================== */

.card-content p{
    margin:0;
    font-size:13px;
    font-weight:600;
    color:#64748b;
    line-height:1.2;
}

.card-content h2{
    margin-top:4px;
    font-size:14px !important;
    font-weight:800;
    color:#0f172a;
    line-height:1;
}

/* ========================================
   COLOR VARIANTS
======================================== */

/* BLUE */
.residents-card{
    --card-accent:linear-gradient(90deg,#3b82f6,#60a5fa);
    background:linear-gradient(145deg,#eff6ff,#ffffff);
}

.residents-card .card-icon{
    background:linear-gradient(145deg,#3b82f6,#60a5fa);
}

/* GREEN */
.booking-card{
    --card-accent:linear-gradient(90deg,#22c55e,#4ade80);
    background:linear-gradient(145deg,#f0fdf4,#ffffff);
}

.booking-card .card-icon{
    background:linear-gradient(145deg,#22c55e,#4ade80);
}

/* RED */
.expired-card{
    --card-accent:linear-gradient(90deg,#ef4444,#f87171);
    background:linear-gradient(145deg,#fef2f2,#ffffff);
}

.expired-card .card-icon{
    background:linear-gradient(145deg,#ef4444,#f87171);
}

/* PURPLE */
.revenue-card{
    --card-accent:linear-gradient(90deg,#8b5cf6,#a78bfa);
    background:linear-gradient(145deg,#f5f3ff,#ffffff);
}

.revenue-card .card-icon{
    background:linear-gradient(145deg,#8b5cf6,#a78bfa);
}

/* ORANGE */
.users-card{
    --card-accent:linear-gradient(90deg,#f97316,#fb923c);
    background:linear-gradient(145deg,#fff7ed,#ffffff);
}

.users-card .card-icon{
    background:linear-gradient(145deg,#f97316,#fb923c);
}

/* ========================================
   GRID GAP
======================================== */

.row.g-4{
    --bs-gutter-x:1rem;
    --bs-gutter-y:1rem;
}

/* ========================================
   RESPONSIVE
======================================== */

@media(max-width:992px){

    .dashboard-card{
        padding:12px 14px;
        min-height:76px;
    }

    .card-icon{
        width:38px;
        height:38px;
        min-width:38px;
    }

    .card-icon iconify-icon{
        font-size:18px;
    }

    .card-content h2{
        font-size:20px !important;
    }
}

@media(max-width:576px){

    .dashboard-card{
        padding:10px 12px;
        min-height:70px;
        border-radius:14px;
    }

    .card-icon{
        width:34px;
        height:34px;
        min-width:34px;
        border-radius:10px;
    }

    .card-icon iconify-icon{
        font-size:16px;
    }

    .card-content p{
        font-size:11px;
    }

    .card-content h2{
        font-size:18px !important;
    }
}
</style>

<div class="dashboard-main-body">
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Society Dashboard</h6>
    </div>

<div class="row g-4">
    
<!-- Total Residents -->
<div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-6">
    <div class="dashboard-card residents-card">
        <div class="card-icon">
            <iconify-icon icon="mdi:account-group"></iconify-icon>
        </div>

        <div class="card-content">
            <p>Total Residents</p>
            <h2>350</h2>
        </div>
    </div>
</div>

<!-- Pending Maintenance -->
<div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-6">
    <div class="dashboard-card booking-card">
        <div class="card-icon">
            <iconify-icon icon="mdi:cash-clock"></iconify-icon>
        </div>

        <div class="card-content">
            <p>Pending Maintenance</p>
            <h2>28</h2>
        </div>
    </div>
</div>

<!-- Complaints -->
<div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-6">
    <div class="dashboard-card expired-card">
        <div class="card-icon">
            <iconify-icon icon="mdi:alert-circle-outline"></iconify-icon>
        </div>

        <div class="card-content">
            <p>Complaints</p>
            <h2>12</h2>
        </div>
    </div>
</div>

<!-- Visitors Today -->
<div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-6">
    <div class="dashboard-card revenue-card">
        <div class="card-icon">
            <iconify-icon icon="mdi:account-arrow-right-outline"></iconify-icon>
        </div>

        <div class="card-content">
            <p>Visitors Today</p>
            <h2>45</h2>
        </div>
    </div>
</div>

<!-- Staff Present -->
<div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-6">
    <div class="dashboard-card users-card">
        <div class="card-icon">
            <iconify-icon icon="mdi:badge-account-outline"></iconify-icon>
        </div>

        <div class="card-content">
            <p>Staff Present</p>
            <h2>18</h2>
        </div>
    </div>
</div>

<!-- Available Fund -->
<div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-6">
    <div class="dashboard-card revenue-card">
        <div class="card-icon">
            <iconify-icon icon="mdi:wallet-outline"></iconify-icon>
        </div>

        <div class="card-content">
            <p>Available Fund</p>
            <h2>₹2.5L</h2>
        </div>
    </div>
</div>

<!-- Today Collection -->
<div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-6">
    <div class="dashboard-card booking-card">
        <div class="card-icon">
            <iconify-icon icon="mdi:cash-multiple"></iconify-icon>
        </div>

        <div class="card-content">
            <p>Today Collection</p>
            <h2>₹12,500</h2>
        </div>
    </div>
</div>

<!-- Due This Month -->
<div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-6">
    <div class="dashboard-card expired-card">
        <div class="card-icon">
            <iconify-icon icon="mdi:calendar-alert"></iconify-icon>
        </div>

        <div class="card-content">
            <p>Due This Month</p>
            <h2>₹48,000</h2>
        </div>
    </div>
</div>


    <!-- TOTAL FLAT -->
    <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-6">
        <div class="dashboard-card residents-card">
            <div class="card-icon">
                <iconify-icon icon="mdi:home-city-outline"></iconify-icon>
            </div>

            <div class="card-content">
                <p>Total Flat</p>
                <h2>250</h2>
            </div>
        </div>
    </div>

    <!-- OCCUPIED FLAT -->
    <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-6">
        <div class="dashboard-card booking-card">
            <div class="card-icon">
                <iconify-icon icon="mdi:home-account"></iconify-icon>
            </div>

            <div class="card-content">
                <p>Occupied Flat</p>
                <h2>220</h2>
            </div>
        </div>
    </div>

    <!-- NOTICE -->
    <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-6">
        <div class="dashboard-card expired-card">
            <div class="card-icon">
                <iconify-icon icon="mdi:bullhorn-outline"></iconify-icon>
            </div>

            <div class="card-content">
                <p>Notice</p>
                <h2>12</h2>
            </div>
        </div>
    </div>

    <!-- REVENUE THIS MONTH -->
    <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-6">
        <div class="dashboard-card revenue-card">
            <div class="card-icon">
                <iconify-icon icon="mdi:currency-inr"></iconify-icon>
            </div>

            <div class="card-content">
                <p>Revenue</p>
                <h2>₹1.8L</h2>
            </div>
        </div>
    </div>

    <!-- PENDING PAYMENT -->
    <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-6 col-sm-6">
        <div class="dashboard-card users-card">
            <div class="card-icon">
                <iconify-icon icon="mdi:cash-remove"></iconify-icon>
            </div>

            <div class="card-content">
                <p>Pending Payment</p>
                <h2>35</h2>
            </div>
        </div>
    </div>



</div>

<div class="row mt-5">

    <!-- Collection Overview -->
    <div class="col-lg-6 mb-4">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body">
                <h6 class="fw-semibold mb-3">Collection Overview</h6>
                <div id="collectionChart"></div>
            </div>
        </div>
    </div>

    <!-- Expense Overview -->
    <div class="col-lg-6 mb-4">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body">
                <h6 class="fw-semibold mb-3">Expense Overview</h6>
                <div id="expenseChart"></div>
            </div>
        </div>
    </div>

</div>
    
</div>
  
  
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {

    // Collection Overview Line Chart
    var collectionOptions = {
        chart: {
            type: 'line',
            height: 280,
            toolbar: {
                show: false
            }
        },

        series: [{
            name: 'Collection',
            data: [80000, 85000, 140000, 130000, 175000, 120000, 160000, 210000]
        }],

        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
        },

        stroke: {
            curve: 'smooth',
            width: 3
        },

        markers: {
            size: 5
        },

        colors: ['#136DBD'],

        dataLabels: {
            enabled: false
        },

        grid: {
            borderColor: '#f1f1f1'
        }
    };

    var collectionChart = new ApexCharts(
        document.querySelector("#collectionChart"),
        collectionOptions
    );

    collectionChart.render();



    // Expense Overview Donut Chart
    var expenseOptions = {
        chart: {
            type: 'donut',
            height: 280
        },

        series: [40, 30, 20, 10],

        labels: ['Maintenance', 'Salary', 'Electricity', 'Others'],

        colors: ['#195DCF', '#42A9C9', '#47A65C', '#F09173'],

        legend: {
            position: 'right'
        },

        dataLabels: {
            enabled: false
        },

        plotOptions: {
            pie: {
                donut: {
                    size: '65%'
                }
            }
        }
    };

    var expenseChart = new ApexCharts(
        document.querySelector("#expenseChart"),
        expenseOptions
    );

    expenseChart.render();

});
</script>

 <?php include'footer.php' ?>