@extends('layouts.owner')

@section('title', 'Owner Dashboard')
@section('header_title', 'Establishment Performance')

@section('content')
    <div class="stats-grid">
        <div class="stat-item stat-blue">
            <div class="stat-icon"><i class="fas fa-building"></i></div>
            <div class="stat-content">
                <div class="label">Total Managed Venues</div>
                <div class="value">{{ $clubs->count() }}</div>
            </div>
        </div>
        <div class="stat-item stat-purple">
            <div class="stat-icon"><i class="fas fa-calendar-alt"></i></div>
            <div class="stat-content">
                <div class="label">Confirmed Bookings</div>
                <div class="value">{{ $recentBookings->where('status', 'confirmed')->count() }}</div>
            </div>
        </div>
        <div class="stat-item stat-green">
            <div class="stat-icon"><i class="fas fa-wallet"></i></div>
            <div class="stat-content">
                <div class="label">Revenue (MTD)</div>
                <div class="value">Rs. {{ number_format($recentBookings->where('status', 'confirmed')->sum('total_price')) }}</div>
            </div>
        </div>
    </div>

    <div class="data-card">
        <div class="card-header">
            <h2>Active Infrastructure Nodes</h2>
            <a href="{{ route('clubs.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> Initialize Node</a>
        </div>
        <div class="table-wrap">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Node Specification</th>
                        <th>Deployment Address</th>
                        <th>Capacity Metrics</th>
                        <th>Network Status</th>
                        <th style="text-align: right;">Command Center</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($clubs as $club)
                    <tr>
                        <td>
                            <div style="font-weight: 800; color: var(--secondary); font-size: 1rem;">{{ $club->name }}</div>
                            <div style="font-size: 0.75rem; color: var(--primary); font-weight: 700; text-transform: uppercase;">{{ $club->sport->name ?? 'Multi-Discipline' }}</div>
                        </td>
                        <td>{{ Str::limit($club->address, 50) }}</td>
                        <td>
                            <div style="font-weight: 700; color: #fff;">{{ $club->courts->count() }} Performance Slates</div>
                        </td>
                        <td>
                            <span class="status-pill {{ $club->is_active ? 'pill-confirmed' : 'pill-pending' }}">
                                {{ $club->is_active ? 'Online' : 'Pending Audit' }}
                            </span>
                        </td>
                        <td style="text-align: right;">
                            <a href="{{ route('clubs.show', $club) }}" class="btn btn-sm btn-outline"><i class="fas fa-sliders"></i> Adjust</a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="data-card">
        <div class="card-header">
            <h2>Live Occupancy Stream</h2>
            <button class="btn btn-sm btn-outline">Analytics Terminal</button>
        </div>
        <div class="table-wrap">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Operator / Player</th>
                        <th>Allocated Asset</th>
                        <th>Timeline Slot</th>
                        <th>Contract Value</th>
                        <th>Encryption Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recentBookings as $booking)
                    <tr>
                        <td>
                            <div style="display: flex; gap: 1rem; align-items: center;">
                                <div style="width: 38px; height: 38px; background: rgba(255,255,255,0.05); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--primary); font-size: 0.9rem; border: 1px solid var(--border);">
                                    {{ substr($booking->user->name, 0, 1) }}
                                </div>
                                <div style="font-weight: 700; color: #fff;">{{ $booking->user->name }}</div>
                            </div>
                        </td>
                        <td>{{ $booking->court->name }} <br><small style="color: var(--text-muted);">{{ $booking->court->club->name }}</small></td>
                        <td>
                            <div style="font-weight: 700; color: #fff;">{{ \Carbon\Carbon::parse($booking->booking_date)->format('d M, Y') }}</div>
                            <div style="font-size: 0.75rem; color: var(--text-muted); font-weight: 600;">{{ $booking->start_time }} - {{ $booking->end_time }}</div>
                        </td>
                        <td><div style="font-weight: 800; color: var(--primary);">Rs. {{ number_format($booking->total_price) }}</div></td>
                        <td>
                            <span class="status-pill pill-{{ $booking->status }}">
                                {{ $booking->status }}
                            </span>
                        </td>
                    </tr>
                    @empty
                        <tr>
                            <td colspan="5" style="padding: 6rem 4rem; text-align: center; color: var(--text-muted);">
                                <i class="fas fa-radar fa-3x" style="opacity: 0.1; display: block; margin-bottom: 2rem;"></i>
                                <span style="font-weight: 600;">No active occupancy streams detected.</span>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection