<?php
require_once './header_new.php';
// require_once './PHP_Code/connection.php';
?>

<!--<link href="./custom_js/new_css.css" rel="stylesheet">

<div class="app-main__outer">
    <div class="app-main__inner">
        <div class="tabs-animation">
            <div class="row">
                <div class="col-sm-12 col-md-6 col-xl-4">
                    <div class="card mb-3 widget-chart" id="total_challan" style="background-color: darkcyan">
                        <div class="widget-chart-content">
                            <div class="icon-wrapper rounded">
                                <div class="icon-wrapper-bg bg-warning" style="background-color: white !important"></div>
                                <i class="fa fa-user text-warning" style="color: white !important"></i>
                            </div>
                            <div class="widget-numbers">
<?php
$query = 'select COUNT(DISTINCT village_id) as total_record from  tbl_village_info where flag="1"';
$result = mysqli_query($con, $query);
if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        ?>
                                                <span style="color: white !important"> <?php echo $row["total_record"]; ?></span>
        <?php
    }
} else {
    
}
?>
                            </div>
                            <div class="widget-subheading fsize-1 pt-2 opacity-10 text-warning font-weight-bold">
                                <h3><b style="color: white !important">Total Village Detail</b></h3>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-sm-12 col-md-6 col-xl-4">
                    <div class="card mb-3 widget-chart" id="total_head" style="background: linear-gradient(135deg, #4e54c8, #8f94fb, #7efff5);">
                        <div class="widget-chart-content">
                            <div class="icon-wrapper rounded">
                                <div class="icon-wrapper-bg bg-danger" style="background-color: white !important"></div>
                                <i class="fa fa-user text-danger" style="color: white !important"></i>
                            </div>
                            <div class="widget-numbers">
<?php
$query = 'select COUNT(DISTINCT village_id) as total_record1 from  tbl_household_data where flag="1"';
$result = mysqli_query($con, $query);
if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        ?>
                                        <span style="color: white !important"> <?php echo $row["total_record1"]; ?></span>
        <?php
    }
} else {
    
}
?>
                            </div>
                            <div class="widget-subheading fsize-1 pt-2 opacity-10 text-danger font-weight-bold">
                                <h3><b style="color: white !important">Total Family Detail</b></h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>-->


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
    body {
        background: #f8f9fa;
        font-family: 'Segoe UI', sans-serif;
    }

    .card-summary {
        border-radius: 15px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .chart-container {
        background: white;
        padding: 20px;
        border-radius: 15px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    h4 {
        margin-top: 20px;
        font-weight: bold;
    }

    .table-wrapper {
        background: white;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
</style>
<!--</head>
<body>-->

<div class="container py-4">
    <h2 class="text-center mb-4">🧾 ફેમિલી સર્વે ડેશબોર્ડ</h2>

    <!-- Summary Cards -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="card card-summary text-bg-primary text-white text-center p-3">
                <h5>કુલ પરિવાર</h5>
                <h3>1,200</h3>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-summary text-bg-success text-white text-center p-3">
                <h5>પુરુષ</h5>
                <h3>3,100</h3>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-summary text-bg-danger text-white text-center p-3">
                <h5>મહિલા</h5>
                <h3>3,400</h3>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card card-summary text-bg-warning text-dark text-center p-3">
                <h5>બાળકો</h5>
                <h3>1,050</h3>
            </div>
        </div>
    </div>

    <!-- Charts -->
    <div class="row g-4 mb-4">
        <div class="col-md-6">
            <div class="chart-container">
                <h5 class="text-center">રેશન કાર્ડ વિતરણ</h5>
                <canvas id="rationPieChart" height="200"></canvas>
            </div>
        </div>
        <div class="col-md-6">
            <div class="chart-container">
                <h5 class="text-center">ઉજ્જ્વલા લાભ પામનાર</h5>
                <canvas id="ujjwalaBarChart" height="200"></canvas>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="table-wrapper">
        <h5 class="mb-3">📊 ગામ મુજબ લાભ પામનાર વિગત</h5>
        <div class="table-responsive">
            <table class="table table-bordered table-hover">
                <thead class="table-light">
                    <tr>
                        <th>ક્રમ</th>
                        <th>ગામ</th>
                        <th>ફળીયુ</th>
                        <th>પરિવાર સંખ્યા</th>
                        <th>PM-Kisan લાભ</th>
                        <th>ઉજ્જ્વલા લાભ</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>ગોપાલપુરા</td>
                        <td>ભીલ ફળીયુ</td>
                        <td>120</td>
                        <td>45</td>
                        <td>37</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>વડપાડા</td>
                        <td>હોલી ફળીયુ</td>
                        <td>100</td>
                        <td>30</td>
                        <td>28</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>આમલગુંદી</td>
                        <td>પારસી સળીયુ</td>
                        <td>95</td>
                        <td>20</td>
                        <td>19</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    // Pie Chart - Ration Card
    const rationCtx = document.getElementById('rationPieChart');
    new Chart(rationCtx, {
        type: 'pie',
        data: {
            labels: ['Antyoday', 'BPL', 'NFSA'],
            datasets: [{
                    label: 'Ration Card',
                    data: [45, 35, 20],
                    backgroundColor: ['#0d6efd', '#198754', '#ffc107'],
                    borderWidth: 1
                }]
        }
    });

    // Bar Chart - Ujjwala Beneficiaries
    const ujjwalaCtx = document.getElementById('ujjwalaBarChart');
    new Chart(ujjwalaCtx, {
        type: 'bar',
        data: {
            labels: ['ગોપાલપુરા', 'વડપાડા', 'આમલગુંદી'],
            datasets: [{
                    label: 'ઉજ્જ્વલા લાભ પામનાર',
                    data: [37, 28, 19],
                    backgroundColor: '#dc3545'
                }]
        },
        options: {
            responsive: true,
            scales: {
                y: {beginAtZero: true}
            }
        }
    });
</script>


<?php
//require_once './admin_footer.php';
?>