@extends('layouts.app')

@section('title', 'Administrative Investor Dashboard | Kevron Suites & Apartments')

@section('content')
<section class="min-h-screen bg-[#080D2B] text-white pt-24 pb-16 select-none" style="font-family: var(--font-body);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
        
        <!-- Header Section -->
        <div class="flex flex-col md:flex-row md:items-center justify-between border-b border-white/10 pb-6 gap-4">
            <div>
                <span class="text-[9px] uppercase tracking-[0.3em] text-[#D6A84F] font-bold block mb-1">PROPRIETARY MANAGEMENT SYSTEM</span>
                <h1 class="text-white leading-tight font-serif text-2xl" style="font-family: var(--font-heading);">Owner & Investor Portal</h1>
                <p class="text-slate-400 text-xs mt-1 max-w-xl font-medium leading-relaxed">
                    Overview of asset utilization, payout records, dynamic revenue shares, and check-in statuses across Kevron en-suite properties.
                </p>
            </div>
            
            <div class="flex items-center space-x-3 shrink-0">
                <span class="inline-flex items-center px-3 py-1 bg-slate-900 border border-[#D6A84F]/30 text-[#D6A84F] text-[10px] uppercase font-bold tracking-widest" style="border-radius: 0.1rem;">
                    <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-pulse mr-2"></span>
                    Live Sync active
                </span>
            </div>
        </div>

        <!-- Analytics Stats Row -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            
            <!-- Occupancy Card -->
            <div class="bg-slate-950 border border-white/10 p-5 shadow-xl flex flex-col justify-between" style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                <div class="space-y-1">
                    <span class="text-[9px] uppercase tracking-widest text-[#D6A84F] font-bold block">OCCUPANCY RATE</span>
                    <span class="text-3xl font-bold font-mono text-white block">{{ $occupancyRate }}%</span>
                </div>
                <p class="text-[10px] text-slate-400 mt-4 leading-normal font-semibold">
                    {{ $activeBookingsCount }} units active out of {{ $unitsCount }} total keys.
                </p>
            </div>

            <!-- Total Revenue Card -->
            <div class="bg-slate-950 border border-white/10 p-5 shadow-xl flex flex-col justify-between" style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                <div class="space-y-1">
                    <span class="text-[9px] uppercase tracking-widest text-slate-400 font-bold block">ACCUMULATED GROSS</span>
                    <span class="text-3xl font-bold font-mono text-emerald-400 block">₦{{ number_format($baseRevenue) }}</span>
                </div>
                <p class="text-[10px] text-slate-400 mt-4 leading-normal font-semibold">
                    Total paid bookings collected across all en-suite categories.
                </p>
            </div>

            <!-- Owner Share Card -->
            <div class="bg-slate-950 border border-white/10 p-5 shadow-xl flex flex-col justify-between" style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                <div class="space-y-1">
                    <span class="text-[9px] uppercase tracking-widest text-[#1FADEA] font-bold block">INVESTOR YIELD ({{ $ownerSplitPercent }}%)</span>
                    <span class="text-3xl font-bold font-mono text-white block">₦{{ number_format($ownerRevenue) }}</span>
                </div>
                <p class="text-[10px] text-slate-400 mt-4 leading-normal font-semibold">
                    Allocated share net payouts generated this calendar cycle.
                </p>
            </div>

            <!-- Cleanliness Rating Card -->
            <div class="bg-slate-950 border border-white/10 p-5 shadow-xl flex flex-col justify-between" style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                <div class="space-y-1">
                    <span class="text-[9px] uppercase tracking-widest text-slate-400 font-bold block">BRAND VALUE INDEX</span>
                    <span class="text-3xl font-bold font-mono text-[#D6A84F] block">98.2%</span>
                </div>
                <p class="text-[10px] text-slate-400 mt-4 leading-normal font-semibold">
                    Average hospitality rating computed across dynamic guest reviews.
                </p>
            </div>

        </div>

        <!-- Main Layout: Suites yields on left, Maintenance on right -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            
            <!-- Left 2 Columns: Category Yields & Unit Performance -->
            <div class="lg:col-span-2 space-y-8">
                
                <!-- Suites Performance Table -->
                <div class="bg-slate-950 border border-white/10 p-6 shadow-2xl space-y-4" style="border-radius: 0.1rem;">
                    <h3 class="text-xs font-bold text-white uppercase tracking-widest font-serif" style="font-family: var(--font-heading);">Suite Classification Yields</h3>
                    
                    <div class="overflow-x-auto">
                        <table class="w-full text-left text-xs font-semibold">
                            <thead>
                                <tr class="border-b border-white/10 text-slate-400 text-[10px] uppercase tracking-widest">
                                    <th class="pb-3">Apartment Suite</th>
                                    <th class="pb-3 text-center">Managed Keys</th>
                                    <th class="pb-3 text-center">Stays Volume</th>
                                    <th class="pb-3 text-right">Gross Yield</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-white/5 text-slate-300">
                                @foreach($suitesPerformance as $perf)
                                    <tr>
                                        <td class="py-3.5 font-serif font-bold text-white">{{ $perf['name'] }}</td>
                                        <td class="py-3.5 text-center">{{ $perf['units_count'] }}</td>
                                        <td class="py-3.5 text-center">{{ $perf['bookings_count'] }} stays</td>
                                        <td class="py-3.5 text-right text-emerald-400 font-mono">₦{{ number_format($perf['revenue']) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Asset Properties Locations -->
                <div class="bg-slate-950 border border-white/10 p-6 shadow-2xl space-y-4" style="border-radius: 0.1rem;">
                    <h3 class="text-xs font-bold text-white uppercase tracking-widest font-serif" style="font-family: var(--font-heading);">Location Portfolios</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs font-semibold">
                        @forelse($locations as $loc)
                            <div class="border border-white/10 p-4 bg-slate-900/50 rounded-[0.1rem]">
                                <span class="text-[#D6A84F] block font-serif font-bold text-sm mb-1">{{ $loc->name }}</span>
                                <span class="text-slate-400 block text-[10px]">{{ $loc->physical_address ?? 'Adeniyi Jones, Ikeja, Lagos.' }}</span>
                            </div>
                        @empty
                            <div class="border border-white/10 p-4 bg-slate-900/50 rounded-[0.1rem]">
                                <span class="text-[#D6A84F] block font-serif font-bold text-sm mb-1">Ikeja Suite HQ</span>
                                <span class="text-slate-400 block text-[10px]">7B Regina Coker Street, Adeniyi Jones, Ikeja, Lagos.</span>
                            </div>
                        @endforelse
                    </div>
                </div>

            </div>

            <!-- Right Column: System Logs & Operational Checklist -->
            <div class="space-y-8">
                
                <!-- Gated Asset Checklists -->
                <div class="bg-slate-950 border border-white/10 p-6 shadow-2xl space-y-4" style="border-radius: 0.1rem;">
                    <h3 class="text-xs font-bold text-white uppercase tracking-widest font-serif" style="font-family: var(--font-heading);">Hardware Access & Utilities</h3>
                    
                    <div class="space-y-3.5 text-xs font-semibold leading-relaxed">
                        
                        <!-- Generator status -->
                        <div class="flex items-start justify-between p-3 border border-white/10 bg-slate-900/40 rounded-[0.1rem]">
                            <div>
                                <span class="text-white block font-bold text-[11px] uppercase tracking-wider">Dual Auto-Generators</span>
                                <span class="text-[9px] text-slate-400 block font-sans">Active load balance: 24h continuous power</span>
                            </div>
                            <span class="text-emerald-400 text-[10px] font-bold uppercase tracking-wider">ONLINE</span>
                        </div>

                        <!-- Smart Lock status -->
                        <div class="flex items-start justify-between p-3 border border-white/10 bg-slate-900/40 rounded-[0.1rem]">
                            <div>
                                <span class="text-white block font-bold text-[11px] uppercase tracking-wider">Smart Lock PIN Cylinders</span>
                                <span class="text-[9px] text-slate-400 block font-sans">Time-bound keyless PIN generation: Active</span>
                            </div>
                            <span class="text-emerald-400 text-[10px] font-bold uppercase tracking-wider">ONLINE</span>
                        </div>

                        <!-- CCTV status -->
                        <div class="flex items-start justify-between p-3 border border-white/10 bg-slate-900/40 rounded-[0.1rem]">
                            <div>
                                <span class="text-white block font-bold text-[11px] uppercase tracking-wider">Secure Intercom Systems</span>
                                <span class="text-[9px] text-slate-400 block font-sans">CCTV perimeter security grids</span>
                            </div>
                            <span class="text-emerald-400 text-[10px] font-bold uppercase tracking-wider">SECURE</span>
                        </div>

                    </div>
                </div>

                <!-- Admin Action Triggers -->
                <div class="bg-slate-950 border border-white/10 p-6 shadow-2xl space-y-4" style="border-radius: 0.1rem;">
                    <h3 class="text-xs font-bold text-white uppercase tracking-widest font-serif" style="font-family: var(--font-heading);">Administrative Controls</h3>
                    <p class="text-[10px] text-slate-400 leading-relaxed font-semibold">
                        Synchronize external calendars across channels or trigger system backups instantly.
                    </p>
                    <div class="space-y-3">
                        <form method="POST" action="{{ route('admin.channel_sync') }}">
                            @csrf
                            <button type="submit" class="w-full text-center py-2.5 bg-[#D6A84F] text-slate-950 hover:bg-[#BF9440] text-[10px] uppercase font-bold tracking-wider transition-colors" style="border-radius: 0.1rem;">
                                Trigger OTA Channel Sync
                            </button>
                        </form>
                    </div>
                </div>

            </div>

        </div>

    </div>
</section>
@endsection