@extends('admin.layout')

@section('content')

<!-- TOP BAR -->
<!-- <div class="topbar">
    <div>
        <h4>Welcome back, Admin</h4>
        <small class="text-muted">{{ now()->format('l, F d, Y') }}</small>
    </div>

    <div class="d-flex gap-3 align-items-center">
        <input type="text" class="form-control bg-dark border-0 text-white" placeholder="Search">
        <i class="bi bi-bell fs-4"></i>
        <i class="bi bi-person-circle fs-4"></i>
    </div>
</div> -->

<!-- STATS -->
<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="card-dark">
            <small>Total Properties</small>
            <div class="stat">128</div>
            <small class="text-success">+12 this month</small>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card-dark">
            <small>Active Listings</small>
            <div class="stat">86</div>
            <small class="text-success">+5 new</small>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card-dark">
            <small>Total Inquiries</small>
            <div class="stat">1,347</div>
            <small class="text-success">+18%</small>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card-dark">
            <small>Sales Value</small>
            <div class="stat gold">₹ 42.8 Cr</div>
            <small class="text-success">↑ Growth</small>
        </div>
    </div>
</div>

<!-- CHARTS -->
<div class="row g-4">
    <div class="col-md-8">
        <div class="card-dark">
            <div class="d-flex justify-content-between mb-3">
                <strong>Property Growth</strong>
                <span class="badge bg-warning text-dark">Last 7 Months</span>
            </div>
            <canvas id="propertyChart"></canvas>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card-dark">
            <strong>Inquiries by Location</strong>
            <canvas id="locationChart"></canvas>
        </div>
    </div>
</div>

<!-- TABLE -->
<div class="card-dark mt-4">
    <div class="d-flex justify-content-between mb-3">
        <strong>Recent Inquiries</strong>
        <a href="#" class="text-warning">View all</a>
    </div>

    <table class="table table-dark table-borderless">
        <tr>
            <th>Name</th>
            <th>Property</th>
            <th>Status</th>
        </tr>
        <tr>
            <td>Rahul Sharma</td>
            <td>Luxury Villa – Gurgaon</td>
            <td><span class="badge bg-success">New</span></td>
        </tr>
        <tr>
            <td>Anita Verma</td>
            <td>Sea View Apartment – Mumbai</td>
            <td><span class="badge bg-warning text-dark">Follow-up</span></td>
        </tr>
    </table>
</div>

<!-- CHART JS -->
<script>
new Chart(document.getElementById('propertyChart'), {
    type: 'line',
    data: {
        labels: ['Feb','Mar','Apr','May','Jun','Jul','Aug'],
        datasets: [{
            label: 'Listings',
            data: [40, 55, 62, 48, 60, 78, 86],
            borderColor: '#d4af37',
            tension: 0.4,
            fill: false
        }]
    },
    options: {
        plugins: { legend: { display: false } },
        scales: {
            x: { ticks: { color: '#aaa' } },
            y: { ticks: { color: '#aaa' } }
        }
    }
});

new Chart(document.getElementById('locationChart'), {
    type: 'doughnut',
    data: {
        labels: ['Mumbai','Delhi NCR','Bangalore','Dubai'],
        datasets: [{
            data: [35, 30, 20, 15],
            backgroundColor: ['#d4af37','#1abc9c','#3498db','#9b59b6']
        }]
    },
    options: { plugins: { legend: { position: 'bottom' } } }
});
</script>

@endsection