@extends('layouts.app')

@section('title', 'Admin Dashboard')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-6">
    <h1 class="text-3xl font-bold text-gray-800 mb-8">Admin Dashboard</h1>

    {{-- Quick Action Buttons --}}
    <div class="mb-10 bg-white p-6 rounded-2xl shadow max-w-4xl mx-auto">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Quick Actions</h2>
        <div class="flex flex-wrap gap-4">
            @can('manage properties')
                <a href="{{ route('agent.properties') }}" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded transition">
                    Manage Properties
                </a>
            @endcan

            @can('view tickets')
                <a href="{{ route('tickets.index') }}" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded transition">
                    View Tickets
                </a>
            @endcan

            @can('view wallet')
                <a href="#" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition">
                    Wallet Overview
                </a>
            @endcan
        </div>
    </div>

    {{-- Dashboard Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        @can('view tenants')
            <div class="bg-white p-6 rounded-2xl shadow hover:shadow-lg transition">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-lg font-semibold text-gray-600">Tenants</h2>
                    <i class="fa-solid fa-user text-blue-500 text-xl"></i>
                </div>
                <p class="text-3xl font-bold text-gray-900">{{ $totalUsers }}</p>
            </div>
        @endcan

        @can('view properties')
            <div class="bg-white p-6 rounded-2xl shadow hover:shadow-lg transition">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-lg font-semibold text-gray-600">Properties</h2>
                    <i class="fa-solid fa-building text-green-500 text-xl"></i>
                </div>
                <p class="text-3xl font-bold text-gray-900">{{ $totalProperties }}</p>
            </div>
        @endcan

        @can('view wallet')
            <div class="bg-white p-6 rounded-2xl shadow hover:shadow-lg transition">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-lg font-semibold text-gray-600">Wallet Balance</h2>
                    <i class="fa-solid fa-wallet text-purple-500 text-xl"></i>
                </div>
                <p class="text-3xl font-bold text-gray-900">₦{{ number_format($walletTotal, 2) }}</p>
            </div>
        @endcan

        @can('view tickets')
            <div class="bg-white p-6 rounded-2xl shadow hover:shadow-lg transition">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-lg font-semibold text-gray-600">Pending Tickets</h2>
                    <i class="fa-solid fa-ticket text-orange-500 text-xl"></i>
                </div>
                <p class="text-3xl font-bold text-gray-900">{{ $pendingTickets }}</p>
            </div>
        @endcan
    </div>

    {{-- ✅ Add this section below cards --}}
<div class="mt-12">
    <h2 class="text-xl font-semibold text-gray-800 mb-4">User Role Overview</h2>
    <livewire:admin.user-role-badges />
</div>

    {{-- ❌ Failed Transactions Section --}}
    <div class="mt-12 bg-white p-6 rounded-2xl shadow">
        <h2 class="text-xl font-semibold text-red-600 mb-4">❌ Failed Transactions</h2>

        @if($failedTransactions->count())
            <div class="overflow-x-auto">
                <table class="min-w-full table-auto border-collapse border border-gray-300 mb-4">
                    <thead class="bg-red-100 text-red-800">
                        <tr>
                            <th class="border p-2 text-left">User</th>
                            <th class="border p-2 text-left">Amount</th>
                            <th class="border p-2 text-left">Status</th>
                            <th class="border p-2 text-left">Reference</th>
                            <th class="border p-2 text-left">Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($failedTransactions as $txn)
                            <tr>
                                <td class="border p-2">{{ $txn->user->name ?? 'N/A' }}</td>
                                <td class="border p-2">₦{{ number_format($txn->amount, 2) }}</td>
                                <td class="border p-2 text-red-600 font-semibold">{{ $txn->status }}</td>
                                <td class="border p-2">{{ $txn->reference }}</td>
                                <td class="border p-2">{{ $txn->created_at->format('d M Y H:i') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <p class="text-gray-500">No failed transactions yet.</p>
        @endif
    </div>

    {{-- 🏡 Admin Property Controls --}}
    <div class="mt-12 bg-white p-6 rounded-2xl shadow">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">🏡 Manage Properties</h2>

        @if($properties->isEmpty())
            <p class="text-gray-500">No properties found.</p>
        @else
            <div class="overflow-x-auto">
                <table class="min-w-full table-auto border-collapse border border-gray-300">
                    <thead class="bg-gray-100 text-gray-700">
                        <tr>
                            <th class="border p-2">Title</th>
                            <th class="border p-2">Agent</th>
                            <th class="border p-2">Featured</th>
                            <th class="border p-2">City</th>
                            <th class="border p-2">Price</th>
                            <th class="border p-2 text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($properties as $property)
                            <tr>
                                <td class="border p-2">{{ $property->title }}</td>
                                <td class="border p-2">{{ $property->agent->name ?? 'N/A' }}</td>
                                <td class="border p-2 text-center">
                                    <form method="POST" action="{{ route('admin.properties.toggleFeatured', $property) }}">
                                        @csrf
                                        <button type="submit" class="text-sm px-3 py-1 rounded bg-{{ $property->is_featured ? 'green' : 'gray' }}-100 hover:bg-{{ $property->is_featured ? 'green' : 'gray' }}-200 text-{{ $property->is_featured ? 'green' : 'gray' }}-700">
                                            {{ $property->is_featured ? 'Yes' : 'No' }}
                                        </button>
                                    </form>
                                </td>
                                <td class="border p-2">{{ $property->city }}</td>
                                <td class="border p-2">₦{{ number_format($property->price) }}</td>
                                <td class="border p-2 text-center">
                                    <form method="POST" action="{{ route('admin.properties.destroy', $property) }}" onsubmit="return confirm('Are you sure?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-sm bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded">
                                            Delete
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>
@endsection