@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>

<!-- Recent Activity Section -->
<div class="row mt-4">

    {{-- HOST ACTIVITY TABLE --}}
    <div class="col-md-6 grid-margin stretch-card">
        <div class="card">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">Host Activity</h4>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-3">Type</th>
                                <th>Host</th>
                                <th>Details</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($hostActivities as $activity)
                                <tr>
                                    {{-- Type --}}
                                    <td class="ps-3">
                                        @php
                                            $type    = strtolower(trim($activity->type));
                                            $label   = ucwords(str_replace('_', ' ', $type));
                                            $charSum = array_sum(array_map('ord', str_split($type)));
                                            $colors  = ['#667eea','#4CAF50','#FF9800','#00BCD4','#E91E63','#9C27B0','#FF5722','#2196F3','#009688','#795548','#607D8B','#3F51B5'];
                                            $color   = $colors[$charSum % count($colors)];
                                        @endphp
                                        <span style="background:{{ $color }}; color:#fff; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; display:inline-block;">
                                            {{ $label }}
                                        </span>
                                    </td>

                                    {{-- Host --}}
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="rounded-circle d-flex align-items-center justify-content-center bg-light"
                                                 style="width:30px; height:30px; font-size:12px; font-weight:600; color:#667eea; flex-shrink:0;">
                                                {{ strtoupper(substr(optional($activity->actor)->name ?? 'H', 0, 1)) }}
                                            </div>
                                            <div>
                                                <div class="fw-semibold" style="font-size:12px;">
                                                    {{ optional($activity->actor)->name ?? 'Unknown' }}
                                                </div>
                                                <div class="text-muted" style="font-size:11px;">
                                                    {{ optional($activity->actor)->email ?? '—' }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>

                                    {{-- Details --}}
                                    <td style="font-size:12px; max-width:150px;">
                                        <span class="text-truncate d-block" style="max-width:150px;" title="{{ $activity->message ?? $activity->title ?? '—' }}">
                                            {{ $activity->message ?? $activity->title ?? '—' }}
                                        </span>
                                    </td>

                                    {{-- Date --}}
                                    <td class="text-muted" style="font-size:11px; white-space:nowrap;">
                                        {{ $activity->created_at->format('M d, Y') }}<br>
                                        <small>{{ $activity->created_at->format('h:i A') }}</small>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-4 text-muted">
                                        <i class="bi bi-bell-slash d-block mb-1"></i>
                                        No host activities
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- STUDENT ACTIVITY TABLE --}}
    <div class="col-md-6 grid-margin stretch-card">
        <div class="card">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0">Student Activity</h4>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-3">Type</th>
                                <th>Student</th>
                                <th>Details</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($studentActivities as $activity)
                                <tr>
                                    {{-- Type --}}
                                    <td class="ps-3">
                                        @php
                                            $type    = strtolower(trim($activity->type));
                                            $label   = ucwords(str_replace('_', ' ', $type));
                                            $charSum = array_sum(array_map('ord', str_split($type)));
                                            $colors  = ['#667eea','#4CAF50','#FF9800','#00BCD4','#E91E63','#9C27B0','#FF5722','#2196F3','#009688','#795548','#607D8B','#3F51B5'];
                                            $color   = $colors[$charSum % count($colors)];
                                        @endphp
                                        <span style="background:{{ $color }}; color:#fff; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; display:inline-block;">
                                            {{ $label }}
                                        </span>
                                    </td>

                                    {{-- Student --}}
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="rounded-circle d-flex align-items-center justify-content-center bg-light"
                                                 style="width:30px; height:30px; font-size:12px; font-weight:600; color:#4CAF50; flex-shrink:0;">
                                                {{ strtoupper(substr(optional($activity->actor)->name ?? 'S', 0, 1)) }}
                                            </div>
                                            <div>
                                                <div class="fw-semibold" style="font-size:12px;">
                                                    {{ optional($activity->actor)->name ?? 'Unknown' }}
                                                </div>
                                                <div class="text-muted" style="font-size:11px;">
                                                    {{ optional($activity->actor)->email ?? '—' }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>

                                    {{-- Details --}}
                                    <td style="font-size:12px;">
                                        <span class="text-truncate d-block" style="max-width:150px;" title="{{ $activity->message ?? $activity->title ?? '—' }}">
                                            {{ $activity->message ?? $activity->title ?? '—' }}
                                        </span>
                                    </td>

                                    {{-- Date --}}
                                    <td class="text-muted" style="font-size:11px; white-space:nowrap;">
                                        {{ $activity->created_at->format('M d, Y') }}<br>
                                        <small>{{ $activity->created_at->format('h:i A') }}</small>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center py-4 text-muted">
                                        <i class="bi bi-bell-slash d-block mb-1"></i>
                                        No student activities
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </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');
        
        // Prepare data from your backend
        const months = @json($revenueMonths);
        const revenueData = @json($revenueData);
        
        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