@extends('layouts.app')

@section('content')
<div class="container-fluid p-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="mb-0">Admin Dashboard</h2>
            <small class="text-muted">Group-wide analytics and management</small>
        </div>
        <div>
            <button class="btn btn-primary me-2">
                <i class="fas fa-plus"></i> New Campaign
            </button>
            <button class="btn btn-outline-secondary">
                <i class="fas fa-download"></i> Export Report
            </button>
        </div>
    </div>

    <!-- KPI Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <div class="text-primary mb-2">
                        <i class="fas fa-users fa-2x"></i>
                    </div>
                    <h4 class="mb-0">12,847</h4>
                    <small class="text-muted">Total Members</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <div class="text-success mb-2">
                        <i class="fas fa-calendar-check fa-2x"></i>
                    </div>
                    <h4 class="mb-0">1,234</h4>
                    <small class="text-muted">Visits This Month</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <div class="text-warning mb-2">
                        <i class="fas fa-dollar-sign fa-2x"></i>
                    </div>
                    <h4 class="mb-0">AED 2.4M</h4>
                    <small class="text-muted">Revenue This Month</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <div class="text-info mb-2">
                        <i class="fas fa-percentage fa-2x"></i>
                    </div>
                    <h4 class="mb-0">23.5%</h4>
                    <small class="text-muted">Cross-sell Success Rate</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Revenue Chart -->
        <div class="col-md-8">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="fas fa-chart-line"></i> Revenue by Venue (Last 30 Days)</h6>
                </div>
                <div class="card-body">
                    <canvas id="revenueChart" height="300"></canvas>
                </div>
            </div>
        </div>

        <!-- Tier Distribution -->
        <div class="col-md-4">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="fas fa-crown"></i> Member Tier Distribution</h6>
                </div>
                <div class="card-body">
                    <canvas id="tierChart" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Active Campaigns -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h6 class="mb-0"><i class="fas fa-bullhorn"></i> Active Campaigns</h6>
                    <button class="btn btn-sm btn-primary">
                        <i class="fas fa-plus"></i> New
                    </button>
                </div>
                <div class="card-body">
                    <div class="campaign-item mb-3 p-3 border rounded">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1">City to Coral Bay Cross-sell</h6>
                                <p class="small text-muted mb-2">Target: City Center Hotel guests → Coral Bay packages</p>
                                <div class="progress mb-2" style="height: 6px;">
                                    <div class="progress-bar bg-success" style="width: 67%"></div>
                                </div>
                                <small class="text-muted">67% conversion rate</small>
                            </div>
                            <span class="badge bg-success">Active</span>
                        </div>
                    </div>

                    <div class="campaign-item mb-3 p-3 border rounded">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1">Lebanese Nights Bundle</h6>
                                <p class="small text-muted mb-2">Target: Rayes & Taiga Sky visitors</p>
                                <div class="progress mb-2" style="height: 6px;">
                                    <div class="progress-bar bg-primary" style="width: 45%"></div>
                                </div>
                                <small class="text-muted">45% conversion rate</small>
                            </div>
                            <span class="badge bg-success">Active</span>
                        </div>
                    </div>

                    <div class="campaign-item p-3 border rounded">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1">Family Pool Package</h6>
                                <p class="small text-muted mb-2">Target: Hotel guests with children</p>
                                <div class="progress mb-2" style="height: 6px;">
                                    <div class="progress-bar bg-warning" style="width: 23%"></div>
                                </div>
                                <small class="text-muted">23% conversion rate</small>
                            </div>
                            <span class="badge bg-warning">Testing</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Voucher Management -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h6 class="mb-0"><i class="fas fa-gift"></i> Voucher Management</h6>
                    <button class="btn btn-sm btn-success">
                        <i class="fas fa-plus"></i> New Voucher
                    </button>
                </div>
                <div class="card-body">
                    <div class="voucher-item mb-3 p-3 border rounded">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1">Beach Day Pass - 20% Off</h6>
                                <p class="small text-muted mb-1">Valid at Coral Bay Beach</p>
                                <small class="text-muted">Expires: Dec 31, 2024</small>
                            </div>
                            <div class="text-end">
                                <span class="badge bg-success mb-1">Active</span>
                                <br>
                                <small class="text-muted">142 issued</small>
                            </div>
                        </div>
                    </div>

                    <div class="voucher-item mb-3 p-3 border rounded">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1">Dinner for Two - Free Dessert</h6>
                                <p class="small text-muted mb-1">Valid at La Taverna & Rayes</p>
                                <small class="text-muted">Expires: Jan 15, 2025</small>
                            </div>
                            <div class="text-end">
                                <span class="badge bg-success mb-1">Active</span>
                                <br>
                                <small class="text-muted">89 issued</small>
                            </div>
                        </div>
                    </div>

                    <div class="voucher-item p-3 border rounded">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1">Jetski Adventure - 15% Off</h6>
                                <p class="small text-muted mb-1">Valid at Jetskis</p>
                                <small class="text-muted">Expires: Feb 28, 2025</small>
                            </div>
                            <div class="text-end">
                                <span class="badge bg-warning mb-1">Limited</span>
                                <br>
                                <small class="text-muted">23 issued</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Revenue Chart
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    new Chart(revenueCtx, {
        type: 'bar',
        data: {
            labels: ['Seven Hotel', 'City Center', 'Coral Bay', 'La Taverna', 'Rayes', 'Taiga Sky', 'Trabouche', 'Beach', 'Pool', 'Jetskis'],
            datasets: [{
                label: 'Revenue (AED)',
                data: [450000, 380000, 520000, 120000, 95000, 78000, 65000, 35000, 28000, 45000],
                backgroundColor: 'rgba(13, 110, 253, 0.8)',
                borderColor: 'rgba(13, 110, 253, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return 'AED ' + (value / 1000) + 'K';
                        }
                    }
                }
            }
        }
    });

    // Tier Distribution Chart
    const tierCtx = document.getElementById('tierChart').getContext('2d');
    new Chart(tierCtx, {
        type: 'doughnut',
        data: {
            labels: ['Silver', 'Gold', 'Platinum'],
            datasets: [{
                data: [6847, 4235, 1765],
                backgroundColor: [
                    '#6c757d',
                    '#ffd700',
                    '#6f42c1'
                ],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
</script>
@endsection