@extends('layouts.app')
@section('content')

<div class="content-wrapper">

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

 
<!-- Statistics Cards Row -->
<div class="row">
    <div class="col-sm-6 col-xxl-3 grid-margin stretch-card">
        <a href="#" class="text-decoration-none w-100">
            <div class="card bg-card-2 text-white">
                <div class="card-body">
                    <h4>Total Students</h4>
                    <h2>56</h2>
                    <small class="text-white-50">↑ 56% this month</small>
                </div>
            </div>
        </a>
    </div>

    <div class="col-sm-6 col-xxl-3 grid-margin stretch-card">
        <a href="#" class="text-decoration-none w-100">
            <div class="card bg-card-2 text-white">
                <div class="card-body">
                    <h4>Total Principal</h4>
                    <h2>100</h2>
                    <small class="text-white-50">Total registered hosts</small>
                </div>
            </div>
        </a>
    </div>

    <div class="col-sm-6 col-xxl-3 grid-margin stretch-card">
        <a href="#?status=active" class="text-decoration-none w-100">
            <div class="card bg-card-2 text-white">
                <div class="card-body">
                    <h4>Active Listings</h4>
                    <h2>500</h2>
                    <small class="text-white-50">Out of 500 total</small>
                </div>
            </div>
        </a>
    </div>

    <div class="col-sm-6 col-xxl-3 grid-margin stretch-card">
        <a href="#" class="text-decoration-none w-100">
            <div class="card bg-card-2 text-white">
                <div class="card-body">
                    <h4>Total Revenue</h4>
                    <h2>$80000</h2>
                    <small class="text-white-50">This month: $500</small>
                </div>
            </div>
        </a>
    </div>
</div>

<!-- Second Row for Additional Metrics -->
<div class="row mt-4">
    <div class="col-sm-6 col-xxl-3 grid-margin stretch-card">
        <a href="#?status=pending" class="text-decoration-none w-100">
            <div class="card bg-card-2 text-white">
                <div class="card-body">
                    <h4>New Host Requests</h4>
                    <h2>5</h2>
                     <small class="text-white-50">View pending →</small>
                </div>
            </div>
        </a>
    </div>

    <div class="col-sm-6 col-xxl-3 grid-margin stretch-card">
        <a href="#" class="text-decoration-none w-100">
            <div class="card bg-card-2 text-white">
                <div class="card-body">
                    <h4>Active Subscriptions</h4>
                    <h2>8</h2>
                    <small class="text-white-50">↑ 4 new this week</small>
                </div>
            </div>
        </a>
    </div>

    <div class="col-sm-6 col-xxl-3 grid-margin stretch-card">
        <a href="#?status=pending" class="text-decoration-none w-100">
            <div class="card bg-card-2 text-white">
                <div class="card-body">
                    <h4>Pending Listings</h4>
                    <h2>77</h2>
                    <small class="text-white-50">Awaiting approval</small>
                </div>
            </div>
        </a>
    </div>

    <div class="col-sm-6 col-xxl-3 grid-margin stretch-card">
        <a href="javascript:void(0)" class="text-decoration-none w-100">
            <div class="card bg-card-2 text-white">
                <div class="card-body">
                    <h4>Avg. Monthly Revenue</h4>
                    <h2>$8000</h2>
                    <small class="text-white-50">Per active host</small>
                </div>
            </div>
        </a>
    </div>
</div>

    <!-- Revenue Graph and New Requests Section -->
    <div class="row mt-4">
        <!-- Revenue Graph -->
        <div class="col-lg-6 col-xl-6 col-xxl-8 grid-margin stretch-card">
            <div class="card">
                <div class="card-header bg-white">
                    <h4 class="card-title mb-0">Revenue Overview</h4>
                </div>
                <div class="card-body">
                    <canvas id="revenueChart" height="300"></canvas>
                </div>
            </div>
        </div>

        <!-- New Requests Listing -->
        <div class="col-lg-6 col-xl-6 col-xxl-4 grid-margin stretch-card">
            <div class="card">
                <div class="card-header bg-white">
                    <h4 class="card-title mb-0">New Host Requests</h4>
                </div>
                <div class="card-body">
              <div class="list-group">
    @forelse($newRequests ?? [] as $request)
        <div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
            <div>
                <h6 class="mb-1">{{ $request->name }}</h6>
                <small class="text-muted">{{ $request->email }}</small><br>
                <small class="text-muted">Requested: {{ $request->created_at->diffForHumans() }}</small>
            </div>
            <div class="d-flex gap-1">

                {{-- Approve --}}
                <form action="{{ route('admin.hosts.approve', $request->id) }}"
                      method="POST"
                      onsubmit="return confirm('Approve {{ $request->name }}?')">
                    @csrf
                    <button type="submit" class="btn btn-sm btn-success">✓</button>
                </form>

                {{-- Reject --}}
                <form action="{{ route('admin.hosts.reject', $request->id) }}"
                      method="POST"
                      onsubmit="return confirm('Reject {{ $request->name }}?')">
                    @csrf
                    <button type="submit" class="btn btn-sm btn-danger">✗</button>
                </form>

            </div>
        </div>
    @empty
        <p class="text-muted text-center">No new host requests</p>
    @endforelse
</div>
                    
                    @if(($newHostRequests ?? 0) > 0)
                        <div class="mt-3 text-center">
                            <a href="{{ route('admin.hosts.all') }}?status=pending" class="btn btn-outline-primary btn-sm">View All Requests</a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

</div>


<!-- Chart.js Script -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('revenueChart').getContext('2d');
    
    // Static Data
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
    const revenueData = [1200, 1900, 3000, 2500, 4000, 3200];
    
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: months,
            datasets: [{
                label: 'Monthly Revenue ($)',
                data: revenueData,
                borderColor: 'rgb(75, 192, 192)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                tension: 0.1,
                fill: true
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '$' + value;
                        }
                    }
                }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return 'Revenue: $' + context.parsed.y;
                        }
                    }
                }
            }
        }
    });
});

    // Action functions
    function approveRequest(requestId) {
        if(confirm('Approve this host request?')) {
            console.log('Approving request:', requestId);
            // Add your AJAX logic here
        }
    }

    function rejectRequest(requestId) {
        if(confirm('Reject this host request?')) {
            console.log('Rejecting request:', requestId);
            // Add your AJAX logic here
        }
    }
</script>

<!-- Add this CSS for better styling -->
<style>
    .text-white-50 {
        color: rgba(255, 255, 255, 0.7) !important;
    }
    .bg-card-2 {
        background: linear-gradient(45deg, #667eea, #764ba2);
    }
    .list-group-item {
        border-left: none;
        border-right: none;
    }
    .list-group-item:first-child {
        border-top: none;
    }
    .list-group-item:last-child {
        border-bottom: none;
    }
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
</style>


@endsection