@extends('dashboard.layout')

@section('title', 'Admin Panel - KisahKita')
@section('header_title', 'Dashboard Owner & Control Center')

@section('styles')
<style>
    .chart-container {
        position: relative;
        height: 300px;
        width: 100%;
        margin-top: 15px;
    }
    .admin-filter-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 15px;
    }
    .filter-btn-group {
        display: flex;
        gap: 10px;
    }
    .filter-btn {
        padding: 8px 16px;
        border-radius: 8px;
        background: rgba(255,255,255,0.05);
        color: var(--text-gray);
        border: 1px solid var(--border);
        cursor: pointer;
        font-size: 0.85rem;
        font-weight: 500;
        transition: all 0.2s;
    }
    .filter-btn:hover, .filter-btn.active {
        background: var(--primary);
        color: var(--bg-main);
        border-color: var(--primary);
    }
</style>
@endsection

@section('content')

    <!-- Stats Grid -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-info">
                <span>Omzet Bulan Ini</span>
                <h3>Rp {{ number_format($totalRevenue, 0, ',', '.') }}</h3>
            </div>
            <div class="stat-icon success">
                <i class="fa-solid fa-rupiah-sign"></i>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-info">
                <span>Total Undangan Aktif</span>
                <h3>{{ $activeInvitationsCount }}</h3>
            </div>
            <div class="stat-icon info">
                <i class="fa-solid fa-heart"></i>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-info">
                <span>Trial / Expired</span>
                <h3>{{ $trialInvitationsCount }} / {{ $expiredInvitationsCount }}</h3>
            </div>
            <div class="stat-icon danger">
                <i class="fa-solid fa-hourglass-half"></i>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 30px; flex-wrap: wrap;">
        <!-- Sales Chart -->
        <div class="card" style="margin-bottom:0;">
            <h3 class="card-title">Grafik Pendapatan B2C vs B2B</h3>
            <div class="chart-container">
                <canvas id="salesChart"></canvas>
            </div>
        </div>
        
        <!-- Template Management -->
        <div class="card" style="margin-bottom:0; display: flex; flex-direction: column;">
            <h3 class="card-title">Manajemen Template (Sakelar)</h3>
            <div style="flex:1; display:flex; flex-direction:column; justify-content: space-around; gap: 15px;">
                @foreach($templates as $t)
                    <div style="display:flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border)">
                        <div>
                            <strong style="display:block; font-size:0.92rem;">{{ $t->name }}</strong>
                            <span style="font-size:0.75rem; color:var(--text-muted)">Template ID: {{ $t->id }}</span>
                        </div>
                        <form action="{{ route('admin.templates.toggle', $t->id) }}" method="POST">
                            @csrf
                            <label class="switch">
                                <input type="checkbox" name="is_active" {{ $t->is_active ? 'checked' : '' }} onchange="this.form.submit()">
                                <span class="slider"></span>
                            </label>
                        </form>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

<!-- Main Datatable card -->
<div class="card">
    <div class="card-title" style="display:flex; justify-content:space-between; align-items:center;">
        <span>Daftar Semua Undangan di Sistem</span>
        <a href="{{ route('admin.invitations.create') }}" class="btn btn-primary btn-sm">
            <i class="fa-solid fa-plus"></i> Buat Undangan Baru
        </a>
    </div>
    
        
        <div class="admin-filter-bar">
            <!-- Filter buttons -->
            <div class="filter-btn-group">
                <button class="filter-btn active" onclick="filterStatus('all')">Semua</button>
                <button class="filter-btn" onclick="filterStatus('trial')">Trial</button>
                <button class="filter-btn" onclick="filterStatus('active')">Active</button>
                <button class="filter-btn" onclick="filterStatus('expired')">Expired</button>
            </div>
            
            <div style="font-size:0.85rem; color:var(--text-muted)">
                Menampilkan <strong style="color:white">{{ $invitations->count() }}</strong> undangan terdaftar.
            </div>
        </div>

        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>Pemilik / Customer</th>
                        <th>Slug Undangan</th>
                        <th>Masa Aktif / Expired</th>
                        <th>Status</th>
                        <th>Aksi Kontrol</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($invitations as $inv)
                        <tr class="invitation-row" data-status="{{ $inv->status }}">
                            <td>
                                <strong style="display:block; color:white;">{{ $inv->user->name }}</strong>
                                <span style="font-size:0.75rem; color:var(--text-muted)">Role: {{ ucfirst($inv->user->role) }}</span>
                            </td>
                            <td>
                                <a href="{{ url('/undangan/' . $inv->slug) }}" target="_blank" style="color:var(--primary); text-decoration:none; font-weight:500;">
                                    {{ $inv->slug }} <i class="fa-solid fa-external-link" style="font-size:0.7rem;"></i>
                                </a>
                            </td>
                            <td>
                                @if($inv->status === 'active')
                                    <span style="color:var(--success);">Aktif Selamanya</span>
                                @else
                                    <span>{{ $inv->expires_at ? $inv->expires_at->format('d M Y H:i') : '-' }}</span>
                                    <span style="display:block; font-size:0.75rem; color:var(--text-muted)">({{ $inv->days_left }} hari tersisa)</span>
                                @endif
                            </td>
                            <td>
                                @if($inv->status === 'active')
                                    <span class="badge badge-active">Active</span>
                                @elseif($inv->status === 'trial')
                                    <span class="badge badge-trial">Trial</span>
                                @else
                                    <span class="badge badge-expired">Expired</span>
                                @endif
                            </td>
                            <td>
                                <div style="display:flex; gap:8px;">
                                    <!-- Bypass Activate Button -->
                                    <form action="{{ route('admin.invitations.bypass', $inv->id) }}" method="POST">
                                        @csrf
                                        @if($inv->status !== 'active')
                                            <button type="submit" class="btn btn-success btn-sm" style="padding:6px 12px; font-size:0.75rem;">
                                                <i class="fa-solid fa-unlock-keyhole"></i> Bypass Aktif
                                            </button>
                                        @else
                                            <button type="submit" class="btn btn-secondary btn-sm" style="padding:6px 12px; font-size:0.75rem;" disabled>
                                                Sudah Aktif
                                            </button>
                                        @endif
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" style="text-align: center; color: var(--text-muted);">Belum ada data undangan.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Webhook Logs Table -->
    <div class="card">
        <h3 class="card-title">Log Integrasi Webhook Payment Gateway (Midtrans)</h3>
        <p style="font-size:0.85rem; color:var(--text-muted); margin-bottom: 20px;">Pemantauan pasif untuk respons server, muatan (payload), dan verifikasi transaksi.</p>
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>Waktu Log</th>
                        <th>Order ID / Transaksi</th>
                        <th>Payload Webhook</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($webhookLogs as $log)
                        <tr>
                            <td>{{ $log->created_at->format('d M Y H:i:s') }}</td>
                            <td>
                                <strong style="display:block; color:white;">{{ $log->payload['order_id'] ?? '-' }}</strong>
                                <span style="font-size:0.75rem; color:var(--text-muted)">Tipe: {{ $log->payload['payment_type'] ?? 'qris' }}</span>
                            </td>
                            <td>
                                <pre style="font-size:0.75rem; background:rgba(0,0,0,0.3); padding:10px; border-radius:6px; max-width:400px; overflow-x:auto; font-family:monospace; color:var(--primary);">{{ json_encode($log->payload, JSON_PRETTY_PRINT) }}</pre>
                            </td>
                            <td>
                                @if($log->status === 'success')
                                    <span class="badge badge-active">Success</span>
                                @elseif($log->status === 'failed')
                                    <span class="badge badge-expired">Failed</span>
                                @else
                                    <span class="badge badge-pending">{{ $log->status }}</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" style="text-align: center; color: var(--text-muted);">Belum ada rekaman log webhook.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Filtering datatable locally
    function filterStatus(status) {
        // Change active buttons style
        document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
        event.currentTarget.classList.add('active');

        // Show/hide table rows
        const rows = document.querySelectorAll('.invitation-row');
        rows.forEach(row => {
            const rowStatus = row.getAttribute('data-status');
            if (status === 'all' || rowStatus === status) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    }

    // Chart.js initialization
    const ctx = document.getElementById('salesChart').getContext('2d');
    
    // Group monthly/daily dynamic analytics
    const salesChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: {!! json_encode($chartLabels) !!},
            datasets: [
                {
                    label: 'Pendapatan Aktivasi (Rp 29.000)',
                    data: {!! json_encode($chartB2C) !!},
                    borderColor: '#d4af37',
                    backgroundColor: 'rgba(214, 175, 55, 0.1)',
                    tension: 0.3,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    labels: { color: 'white' }
                }
            },
            scales: {
                y: {
                    grid: { color: 'rgba(255,255,255,0.05)' },
                    ticks: {
                        color: '#718096',
                        callback: function(value) {
                            return 'Rp ' + value.toLocaleString('id-ID');
                        }
                    }
                },
                x: {
                    grid: { color: 'rgba(255,255,255,0.05)' },
                    ticks: { color: '#718096' }
                }
            }
        }
    });
</script>
@endsection