<?php include'header.php' ?>

<style>
/* =========================================
   PREMIUM USER DASHBOARD UI
========================================= */

.dashboard-card{
    position:relative;
    overflow:hidden;

    background:rgba(255,255,255,0.88);
    backdrop-filter:blur(12px);

    border-radius:18px;
    padding:16px;

    display:flex;
    align-items:center;
    gap:14px;

    border:1px solid rgba(255,255,255,0.7);

    min-height:90px;
    width:100%;

    transition:all .3s ease;

    box-shadow:
        0 10px 25px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.dashboard-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 20px 40px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,1);
}

.dashboard-card::before{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    right:-45px;
    top:-45px;

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

    opacity:0;
    transition:.3s;
}

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

.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:44px;
    height:44px;
    min-width:44px;

    border-radius:14px;

    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,.3);
}

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

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

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

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

/* =========================================
   CARD COLORS
========================================= */

.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);
}

.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);
}

.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);
}

.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);
}

.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);
}

/* =========================================
   MAIN CARDS
========================================= */

.card{
    border:none !important;
    border-radius:20px !important;

    background:rgba(255,255,255,.92);

    box-shadow:
        0 10px 30px rgba(15,23,42,.06);
}

.card-header{
    background:transparent !important;
    padding:18px 20px 0 !important;
}

.card-body{
    padding:20px !important;
}

.card-header h6{
    font-size:18px !important;
    font-weight:700;
    color:#0f172a;
}

/* =========================================
   NOTICE DESIGN
========================================= */

.border-bottom{
    border-color:#eef2f7 !important;
}

.text-muted{
    color:#64748b !important;
}

/* =========================================
   QUICK ACTIONS
========================================= */

.quick-action-card{
    position:relative;
    overflow:hidden;

    border:none;
    border-radius:18px;

    padding:22px 12px;

    background:rgba(255,255,255,.88);

    transition:.3s ease;

    box-shadow:
        0 8px 24px rgba(15,23,42,.06);

    cursor:pointer;
}

.quick-action-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 18px 40px rgba(15,23,42,.10);
}

.quick-icon{
    width:58px;
    height:58px;

    margin:auto auto 14px;

    border-radius:16px;

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

    background:linear-gradient(145deg,#6366f1,#8b5cf6);

    box-shadow:
        0 10px 25px rgba(99,102,241,.25);
}

.quick-icon iconify-icon{
    font-size:28px;
    color:#fff;
}

.quick-action-card h6{
    margin:0;
    font-size:15px;
    font-weight:700;
    color:#0f172a;
}

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

@media(max-width:992px){

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

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

@media(max-width:576px){

    .dashboard-card{
        min-height:74px;
        padding:12px;
        gap:12px;
    }

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

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

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

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

    .quick-action-card{
        padding:18px 10px;
    }

    .quick-icon{
        width:48px;
        height:48px;
    }

    .quick-icon iconify-icon{
        font-size:22px;
    }

    .quick-action-card h6{
        font-size:13px;
    }
}
</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">User Dashboard</h6>
    </div>
    <div class="row g-4">
        <!-- Total Due -->
        <div class="col-xl-6 col-lg-6 col-md-6">
            <div class="dashboard-card expired-card">
                <div class="card-icon">
                    <iconify-icon icon="mdi:cash-remove"></iconify-icon>
                </div>
                <div class="card-content">
                    <p>Total Due</p>
                    <h2>₹85,000</h2>
                </div>
            </div>
        </div>
        <!-- Upcoming Due -->
        <div class="col-xl-6 col-lg-6 col-md-6">
            <div class="dashboard-card booking-card">
                <div class="card-icon">
                    <iconify-icon icon="mdi:calendar-clock"></iconify-icon>
                </div>
                <div class="card-content">
                    <p>Upcoming Due</p>
                    <h2>₹22,000</h2>
                </div>
            </div>
        </div>
    </div>
    <!-- Complaint Status + Recent Notice -->
    <div class="row g-4 mt-1">

        <!-- Complaint Status -->
        <div class="col-xl-6 col-lg-6">
            <div class="card border-0 shadow-sm h-100">

                <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                    <h6 class="fw-semibold mb-0">Complaint Status</h6>
                    <a href="complaint.php" class="text-decoration-none fw-medium text-sm">View All</a>
                </div>

                <div class="card-body">
                    <div class="row g-3">

                        <!-- Open Complaint -->
                        <div class="col-6">
                            <div class="dashboard-card residents-card">
                                <div class="card-icon bg-primary-subtle">
                                    <iconify-icon icon="mdi:alert-circle-outline"></iconify-icon>
                                </div>

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

                        <!-- In Progress -->
                        <div class="col-6">
                            <div class="dashboard-card booking-card">
                                <div class="card-icon bg-success-subtle">
                                    <iconify-icon icon="mdi:progress-clock"></iconify-icon>
                                </div>

                                <div class="card-content">
                                    <p>In Progress</p>
                                    <h2>08</h2>
                                </div>
                            </div>
                        </div>

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

        <!-- Recent Notice -->
        <div class="col-xl-6 col-lg-6">
            <div class="card border-0 shadow-sm h-100">

                <div class="card-header bg-white border-0 d-flex justify-content-between align-items-center">
                    <h6 class="fw-semibold mb-0">Recent Notice</h6>
                    <a href="notices.php" class="text-decoration-none fw-medium">View All</a>
                </div>

                <div class="card-body">

                    <!-- Notice Item -->
                    <div class="d-flex align-items-start gap-3 pb-3 border-bottom">
                        <div class="card-icon bg-warning-subtle text-warning">
                            <iconify-icon icon="mdi:bullhorn-outline"></iconify-icon>
                        </div>

                        <div>
                            <h6 class="mb-1 fw-semibold text-md">Water Supply Maintenance</h6>
                            <p class="mb-1 text-muted small">
                                Water supply will be unavailable from 10 AM to 2 PM.
                            </p>
                            <span class="text-muted small">15 May 2026</span>
                        </div>
                    </div>

                    <!-- Notice Item -->
                    <div class="d-flex align-items-start gap-3 pt-3">
                        <div class="card-icon bg-info-subtle text-info">
                            <iconify-icon icon="mdi:calendar-alert-outline"></iconify-icon>
                        </div>

                        <div>
                            <h6 class="mb-1 fw-semibold text-md">Society Meeting</h6>
                            <p class="mb-1 text-muted small">
                                Monthly society meeting on Sunday at 5 PM.
                            </p>
                            <span class="text-muted small">14 May 2026</span>
                        </div>
                    </div>

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

    </div>
    <!-- Quick Actions -->
    <div class="row mt-4">
        <div class="col-12" >
            <div class="card border-0 shadow-sm mt-5">

                <!-- Header -->
                <div class="card-header bg-white border-0">
                    <h6 class="fw-semibold mb-0">Quick Actions</h6>
                </div>

                <!-- Body -->
                <div class="card-body">
                    <div class="row g-3">

                        <!-- Pay Bill -->
                        <div class="col-xl-4 col-md-4 col-6">
                            <div class="quick-action-card text-center">
                                <div class="quick-icon">
                                    <iconify-icon icon="mdi:credit-card-outline"></iconify-icon>
                                </div>

                                <h6 class="text-md">Pay Bill</h6>
                            </div>
                        </div>

                        <!-- Raise Complaint -->
                        <div class="col-xl-4 col-md-4 col-6">
                            <div class="quick-action-card text-center">
                                <div class="quick-icon">
                                    <iconify-icon icon="mdi:message-alert-outline"></iconify-icon>
                                </div>

                                <h6 class="text-md">Raise Complaint</h6>
                            </div>
                        </div>

                        <!-- My Profile -->
                        <div class="col-xl-4 col-md-4 col-6">
                            <div class="quick-action-card text-center">
                                <div class="quick-icon">
                                    <iconify-icon icon="mdi:account-outline"></iconify-icon>
                                </div>

                                <h6 class="text-md">Pre-Approve</h6>
                            </div>
                        </div>

                    </div>
                </div>

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



<?php include'footer.php' ?>