<?php include 'db_connect.php' ?>

<style>
    /* System Layout Isolation Context */
    .dashboard-container {
        padding: 24px;
        background-color: #f8fafc;
        min-height: calc(100vh - 3.5rem);
    }

    /* Premium Modernized Header */
    .welcome-card {
        border: none !important;
        border-radius: 16px !important;
        background: #ffffff;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    }

    .welcome-heading {
        font-size: 1.6rem;
        font-weight: 700;
        letter-spacing: -0.3px;
        color: #0f172a;
    }

    /* Modern KPI Metric Card Layout Engine */
    .metric-card {
        border: none !important;
        border-radius: 16px !important;
        background: #ffffff;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: hidden;
    }

    .metric-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 20px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.03) !important;
    }

    /* Balanced Balanced Icon Postures */
    .metric-icon-wrapper {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Dynamic Visual Themes */
    .theme-houses { color: #2563eb; background-color: #eff6ff; }
    .theme-tenants { color: #ea580c; background-color: #fff7ed; }
    .theme-payments { color: #16a34a; background-color: #f0fdf4; }

    .metric-label {
        color: #64748b !important;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.8px;
    }

    .metric-value {
        font-size: 1.85rem;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -0.5px;
    }

    /* Polished Card Footers */
    .metric-card-footer {
        background: #fafafa !important;
        border-top: 1px solid #f1f5f9 !important;
        padding: 12px 24px !important;
    }

    .metric-card-footer a {
        font-weight: 600;
        font-size: 13px;
        text-decoration: none !important;
        transition: opacity 0.2s;
    }

    .metric-card-footer a:hover {
        opacity: 0.85;
    }
</style>

<div class="dashboard-container">
    <div class="row mb-4">
        <div class="col-12">
            <div class="card welcome-card p-4">
                <h1 class="welcome-heading mb-0 d-flex align-items-center">
                    <span class="mr-3" style="font-size: 1.8rem;">👋</span> 
                    Welcome back, <?php echo $_SESSION['login_name'] ?>!
                </h1>
            </div>
        </div>
    </div>

    <div class="row">
        
        <div class="col-md-4 mb-4">
            <div class="card metric-card">
                <div class="card-body d-flex align-items-center p-4">
                    <div class="metric-icon-wrapper theme-houses mr-4">
                        <i class="fa fa-home fa-lg"></i>
                    </div>
                    <div>
                        <h6 class="metric-label mb-1">Total Houses</h6>
                        <h2 class="metric-value mb-0">
                            <?php echo $conn->query("SELECT id FROM houses")->num_rows ?>
                        </h2>
                    </div>
                </div>
                <div class="metric-card-footer">
                    <a href="index.php?page=houses" class="text-primary d-flex justify-content-between align-items-center">
                        View List Matrix <i class="fa fa-arrow-right sm-icon"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-4">
            <div class="card metric-card">
                <div class="card-body d-flex align-items-center p-4">
                    <div class="metric-icon-wrapper theme-tenants mr-4">
                        <i class="fa fa-users fa-lg"></i>
                    </div>
                    <div>
                        <h6 class="metric-label mb-1">Total Tenants</h6>
                        <h2 class="metric-value mb-0">
                            <?php echo $conn->query("SELECT id FROM tenants where status = 1 ")->num_rows ?>
                        </h2>
                    </div>
                </div>
                <div class="metric-card-footer">
                    <a href="index.php?page=tenants" class="text-warning d-flex justify-content-between align-items-center" style="color: #ea580c !important;">
                        View Tenant Roster <i class="fa fa-arrow-right sm-icon"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-4">
            <div class="card metric-card">
                <div class="card-body d-flex align-items-center p-4">
                    <div class="metric-icon-wrapper theme-payments mr-4">
                        <i class="fa fa-wallet fa-lg"></i>
                    </div>
                    <div>
                        <h6 class="metric-label mb-1">Payments This Month</h6>
                        <h2 class="metric-value mb-0">
                            <?php 
                                // Fixed logic to calculate actual current calendar month payments instead of single-day metrics
                                $current_month = date('m');
                                $current_year = date('Y');
                                $payment = $conn->query("SELECT SUM(amount) as paid FROM payments WHERE MONTH(date_created) = '$current_month' AND YEAR(date_created) = '$current_year'"); 
                                $row = $payment->fetch_array();
                                $total_paid = !empty($row['paid']) ? $row['paid'] : 0;
                                echo number_format($total_paid, 2);
                            ?> 
                            <span style="font-size: 13px; font-weight: 600; color: #94a3b8; margin-left: 2px;">KES</span>
                        </h2>
                    </div>
                </div>
                <div class="metric-card-footer">
                    <a href="index.php?page=invoices" class="text-success d-flex justify-content-between align-items-center">
                        View Payments Ledger <i class="fa fa-arrow-right sm-icon"></i>
                    </a>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    /* System Records Handling Pipelines */
    $('#manage-records').submit(function(e){
        e.preventDefault()
        start_load()
        $.ajax({
            url: 'ajax.php?action=save_track',
            data: new FormData($(this)[0]),
            cache: false,
            contentType: false,
            processData: false,
            method: 'POST',
            type: 'POST',
            success: function(resp){
                resp = JSON.parse(resp)
                if(resp.status == 1){
                    alert_toast("Data successfully saved", 'success')
                    setTimeout(function(){
                        location.reload()
                    }, 800)
                }
            }
        })
    })

    $('#tracking_id').on('keypress', function(e){
        if(e.which == 13){
            get_person()
        }
    })

    $('#check').on('click', function(e){
        get_person()
    })

    function get_person(){
        start_load()
        $.ajax({
            url: 'ajax.php?action=get_pdetails',
            method: "POST",
            data: { tracking_id : $('#tracking_id').val() },
            success: function(resp){
                if(resp){
                    resp = JSON.parse(resp)
                    if(resp.status == 1){
                        $('#name').html(resp.name)
                        $('#address').html(resp.address)
                        $('[name="person_id"]').val(resp.id)
                        $('#details').show()
                        end_load()
                    } else if(resp.status == 2){
                        alert_toast("Unknown tracking id.", 'danger');
                        end_load();
                    }
                }
            }
        })
    }
</script>