@extends('layouts.app')
@section('content')
<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="content-wrapper">

    <div class="page-header">
        <h3 class="page-title">Principal Dashboard</h3>
    </div>

    <!-- KPI CARDS -->
    <div class="row dashboardCard">

        <div class="col-md-3 grid-margin stretch-card">
            <a class="w-100" href="#">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <h4>Featured Listings</h4>
                        <h2>8</h2>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-3 grid-margin stretch-card">
            <a class="w-100" href="#">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <h4>Total Inquiry</h4>
                        <h2>25</h2>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-3 grid-margin stretch-card">
            <a class="w-100" href="#">
                <div class="card bg-info text-white">
                    <div class="card-body">
                        <h4>Total Listing</h4>
                        <h2>40</h2>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-md-3 grid-margin stretch-card">
            <a class="w-100" href="#">
                <div class="card bg-warning text-white">
                    <div class="card-body">
                        <h4>Active Subscriptions</h4>
                        <h2>3</h2>
                    </div>
                </div>
            </a>
        </div>

    </div>

    <!-- TABLES -->
    <div class="row">

        <!-- Listing Table -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-primary text-white">Listing Table</div>
                <div class="card-body">
                    <table id="listingTable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Category</th>
                                <th>Price</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Luxury Hostel</td>
                                <td>Hostel</td>
                                <td>₹12,000</td>
                                <td><span class="badge bg-success">Active</span></td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>PG Near Campus</td>
                                <td>PG</td>
                                <td>₹8,000</td>
                                <td><span class="badge bg-warning">Pending</span></td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Flat for Rent</td>
                                <td>Apartment</td>
                                <td>₹15,000</td>
                                <td><span class="badge bg-danger">Sold</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Inquiry Table -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-success text-white">Inquiry Table</div>
                <div class="card-body">
                    <table id="inquiryTable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>101</td>
                                <td>Rahul Sharma</td>
                                <td>rahul@mail.com</td>
                                <td>9876543210</td>
                                <td>2026-03-10</td>
                            </tr>
                            <tr>
                                <td>102</td>
                                <td>Priya Singh</td>
                                <td>priya@mail.com</td>
                                <td>9123456780</td>
                                <td>2026-03-12</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

    <!-- CHARTS -->
    <div class="row mt-4">

        <!-- Listing Chart -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h4>Listing Statistics</h4>
                    <canvas id="listing-chart"></canvas>
                </div>
            </div>
        </div>

        <!-- Inquiry Chart -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-body text-center">
                    <h4>Inquiry Statistics</h4>
                    <canvas id="inquiry-chart" width="250" height="250"></canvas>
                </div>
            </div>
        </div>

    </div>

</div>

<!-- CHART SCRIPT -->
<script>
document.addEventListener("DOMContentLoaded", function () {

    // Listing Chart
    new Chart(document.getElementById('listing-chart'), {
        type: 'bar',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr'],
            datasets: [
                { label: 'Active', data: [5, 8, 6, 9], backgroundColor: '#4B49AC' },
                { label: 'Pending', data: [2, 3, 4, 2], backgroundColor: '#FFC100' },
                { label: 'Sold', data: [1, 2, 3, 1], backgroundColor: '#FF4747' }
            ]
        },
        options: {
            responsive: true,
            scales: {
                y: { beginAtZero: true }
            }
        }
    });

    // Inquiry Chart
    new Chart(document.getElementById('inquiry-chart'), {
        type: 'doughnut',
        data: {
            labels: ['New', 'Responded', 'Closed'],
            datasets: [{
                data: [10, 8, 7],
                backgroundColor: ['#36A2EB','#4BC0C0','#FF6384']
            }]
        },
        options: {
            cutout: '65%',
            responsive: true
        }
    });

});
</script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
$(document).ready(function () {
    $('#listingTable').DataTable({ pageLength: 5 });
    $('#inquiryTable').DataTable({ pageLength: 5 });
});
</script>

@endsection