@extends('layout')

@section('styles')
<style>
    .stat-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem; border-radius: 12px; text-align: center; }
    .stat-card h3 { font-size: 2rem; margin: 0.5rem 0; }
    .stat-card.blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .stat-card.green { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); color: #333; }
    .stat-card.orange { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: #333; }
    .card { border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-radius: 12px; }
    .card-header { background: #f8f9fa; border-radius: 12px 12px 0 0; border: none; font-weight: 600; }
    .table { margin-bottom: 0; }
</style>
@endsection

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>📊 Admin Kota Dashboard</h1>
        <span class="badge bg-primary">{{ $admin->name }}</span>
    </div>

    <!-- Stats -->
    <div class="row mb-4">
        <div class="col-md-3 mb-3">
            <div class="stat-card blue">
                <i class="bi bi-people" style="font-size: 2rem;"></i>
                <h3>{{ $totalTalents }}</h3>
                <p class="mb-0">Total Talent</p>
            </div>
        </div>
                <div class="col-md-3 mb-3">
            <div class="stat-card green">
                <i class="bi bi-calendar-check" style="font-size: 2rem;"></i>
                <h3>{{ $bookings->total() }}</h3>
                <p class="mb-0">Total Mulai Sesi</p>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="stat-card orange">
                <i class="bi bi-wallet2" style="font-size: 2rem;"></i>
                <h3>{{ number_format($totalWalletBalance, 0) }}</h3>
                <p class="mb-0">Total Wallet Balance (Coin)</p>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="stat-card blue">
                <i class="bi bi-graph-up" style="font-size: 2rem;"></i>
                <h3>{{ $bookings->where('status', 'completed')->count() ?? 0 }}</h3>
                <p class="mb-0">Completed Mulai Sesi</p>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Commission Report -->
        <div class="col-md-12 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>📈 Commission Split Report</span>
                    <div class="d-flex align-items-center gap-2">
                        <small class="text-muted me-2">Platform fee: {{ $commissionReport['platform_fee_percent'] ?? 0 }}%</small>
                        <form method="GET" action="{{ route('admin_kota.dashboard') }}" class="d-flex gap-2 align-items-center">
                            <input type="date" name="start_date" value="{{ request('start_date') }}" class="form-control form-control-sm" />
                            <input type="date" name="end_date" value="{{ request('end_date') }}" class="form-control form-control-sm" />
                            <button class="btn btn-sm btn-primary" type="submit">Filter</button>
                        </form>
                        <a href="{{ route('admin_kota.commission.export', request()->only('start_date','end_date')) }}" class="btn btn-sm btn-outline-primary">Export CSV</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <h5>Total Revenue</h5>
                            <h3>{{ number_format($commissionReport['total_revenue'] ?? 0, 0) }}</h3>
                        </div>
                        <div class="col-md-4">
                            <h5>Platform Fee Total</h5>
                            <h3>{{ number_format($commissionReport['platform_fee_total'] ?? 0, 0) }}</h3>
                        </div>
                        <div class="col-md-4">
                            <h5>Admin Kota Share (total)</h5>
                            <h3>{{ number_format(array_sum(array_map(function($l){ return $l['admin_kota_amount']; }, $commissionReport['levels'] ?? [])), 0) }}</h3>
                        </div>
                    </div>

                    <hr>
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Level</th>
                                    <th>Jumlah Talent</th>
                                    <th>Revenue</th>
                                    <th>Platform Fee</th>
                                    <th>Admin Kota %</th>
                                    <th>Admin Kota Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($commissionReport['levels'] ?? [] as $lvl => $data)
                                <tr>
                                    <td>{{ \App\Models\User::levelLabel($lvl) }}</td>
                                    <td><span class="badge bg-info">{{ $data['talent_count'] }}</span></td>
                                    <td>{{ number_format($data['revenue'], 0) }}</td>
                                    <td>{{ number_format($data['platform_fee'], 0) }}</td>
                                    <td>{{ $data['admin_kota_share_percent'] }}%</td>
                                    <td>{{ number_format($data['admin_kota_amount'], 0) }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- Talents List -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>👥 Daftar Talent ({{ $totalTalents }})</span>
                    <a href="{{ route('admin_kota.users') }}" class="btn btn-sm btn-primary">Lihat Semua</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Level</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($talents as $talent)
                            <tr>
                                <td>{{ $talent->name }}</td>
                                <td><small>{{ $talent->email }}</small></td>
                                <td><span class="badge bg-{{ $talent->getTalentLevelColor() }}">{{ $talent->getTalentLevelLabel() }}</span></td>
                                <td>
                                    <a href="{{ route('admin_kota.talent.detail', $talent->id) }}" class="btn btn-sm btn-info">Detail</a>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="4" class="text-center text-muted py-3">Tidak ada talent</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Recent Bookings -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>📅 Mulai Sesi Terbaru</span>
                    <a href="{{ route('admin_kota.bookings') }}" class="btn btn-sm btn-primary">Lihat Semua</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Customer</th>
                                <th>Talent</th>
                                <th>Status</th>
                                <th>Tanggal</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($bookings->take(5) as $booking)
                            <tr>
                                <td><small>{{ $booking->customer->name ?? 'N/A' }}</small></td>
                                <td><small>{{ $booking->talent->name ?? 'N/A' }}</small></td>
                                <td>
                                    @if($booking->status === 'completed')
                                        <span class="badge bg-success">Selesai</span>
                                    @elseif($booking->status === 'approved')
                                        <span class="badge bg-info">Disetujui</span>
                                    @elseif($booking->status === 'pending')
                                        <span class="badge bg-warning">Pending</span>
                                    @elseif($booking->status === 'cancelled')
                                        <span class="badge bg-danger">Dibatalkan</span>
                                    @else
                                        <span class="badge bg-secondary">{{ $booking->status }}</span>
                                    @endif
                                </td>
                                <td><small>{{ $booking->created_at->format('d M') }}</small></td>
                            </tr>
                            @empty
                            <tr><td colspan="4" class="text-center text-muted py-3">Tidak ada mulai sesi</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Wallet Stats -->
    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span>💰 Wallet Talent</span>
                    <a href="{{ route('admin_kota.wallet') }}" class="btn btn-sm btn-primary">Lihat Detail</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Talent</th>
                                <th>Balance (Coin)</th>
                                <th>Persentase Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($walletStats as $stat)
                            <tr>
                                <td>{{ $stat['talent_name'] }}</td>
                                <td><strong>{{ number_format($stat['balance'], 0) }}</strong></td>
                                <td>
                                    @if($totalWalletBalance > 0)
                                        <div class="progress" style="height: 20px;">
                                            <div class="progress-bar" style="width: {{ ($stat['balance'] / $totalWalletBalance) * 100 }}%;">
                                                {{ number_format(($stat['balance'] / $totalWalletBalance) * 100, 1) }}%
                                            </div>
                                        </div>
                                    @else
                                        <small class="text-muted">N/A</small>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="3" class="text-center text-muted py-3">Tidak ada data wallet</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection