@extends('layouts.app')

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

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

    {{-- Action Buttons with Permission Checks --}}
    <div class="mb-8 sm:mb-10 bg-white p-4 sm:p-6 rounded-2xl shadow max-w-full sm:max-w-4xl mx-auto">
        <h2 class="text-lg sm:text-xl font-semibold text-gray-800 mb-4">Quick Actions</h2>
        <div class="flex flex-wrap justify-center sm:justify-start gap-3 sm:gap-4">
            @can('manage users')
                <a href="{{ route('superadmin.users') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded transition">
                    Manage Users
                </a>
            @endcan
            @can('create users')
                <a href="{{ route('superadmin.users.create') }}" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded transition">
                    Create New User
                </a>
            @endcan
            @can('manage properties')
                <a href="{{ route('superadmin.properties') }}" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded transition">
                    Manage Properties
                </a>
            @endcan
            @can('view flags')
                <a href="{{ route('superadmin.flags') }}" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded transition">
                    View Flags
                </a>
            @endcan
            @can('view wallet')
                <a href="{{ route('superadmin.wallets') }}" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded transition">
                    Wallet Overview
                </a>
            @endcan
            @can('view tickets')
                <a href="{{ route('superadmin.tickets.admin') }}" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded transition">
                    View Tickets
                </a>
            @endcan
        </div>
    </div>

    {{-- Summary Cards (Use Component) --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
        <x-summary-card icon="fa-users" color="blue" title="Users" :value="$totalUsers ?? 0" />
        <x-summary-card icon="fa-building" color="green" title="Properties" :value="$totalProperties ?? 0" />
        <x-summary-card icon="fa-wallet" color="purple" title="Wallet Balance (₦)" :value="number_format($walletBalance ?? 0, 2)" prefix="₦" />
        <x-summary-card icon="fa-flag" color="red" title="Flags" :value="$totalFlags ?? 0" />
        <x-summary-card icon="fa-ticket" color="orange" title="Support Tickets" :value="$totalTickets ?? 0">
            <a href="{{ route('superadmin.tickets.admin') }}" class="text-sm text-blue-600 hover:underline mt-2 inline-block">View Tickets</a>
        </x-summary-card>
    </div>
</div>
@endsection