@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">Dashboard</h2>
            <small class="text-muted">Welcome back! Here's what's happening today.</small>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary" onclick="refreshData()">
                <i class="fas fa-sync-alt"></i> Refresh
            </button>
            <div class="dropdown">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    <i class="fas fa-calendar"></i> Today
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Today</a></li>
                    <li><a class="dropdown-item" href="#">This Week</a></li>
                    <li><a class="dropdown-item" href="#">This Month</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- KPI Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card kpi-card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-primary bg-opacity-10 p-3 rounded">
                                <i class="fas fa-users fa-2x text-primary"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h3 class="mb-0">247</h3>
                            <small class="text-muted">Active Members</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card kpi-card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-success bg-opacity-10 p-3 rounded">
                                <i class="fas fa-sign-in-alt fa-2x text-success"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h3 class="mb-0">42</h3>
                            <small class="text-muted">Today's Check-ins</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card kpi-card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-warning bg-opacity-10 p-3 rounded">
                                <i class="fas fa-lightbulb fa-2x text-warning"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h3 class="mb-0">18</h3>
                            <small class="text-muted">Cross-sell Opportunities</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card kpi-card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-info bg-opacity-10 p-3 rounded">
                                <i class="fas fa-dollar-sign fa-2x text-info"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h3 class="mb-0">$12,450</h3>
                            <small class="text-muted">Today's Revenue</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Visits by Venue</h5>
                </div>
                <div class="card-body">
                    <canvas id="venueChart" height="200"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Loyalty Tier Distribution</h5>
                </div>
                <div class="card-body">
                    <canvas id="tierChart" height="200"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Guests Table -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Recent Guests</h5>
            <a href="{{ route('guests.search') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-search"></i> Search All Guests
            </a>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Guest</th>
                            <th>Loyalty ID</th>
                            <th>Tier</th>
                            <th>Last Visit</th>
                            <th>Venue</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 me-3">
                                        <i class="fas fa-user-circle fa-2x text-secondary"></i>
                                    </div>
                                    <div>
                                        <div class="fw-bold">Sarah Johnson</div>
                                        <small class="text-muted">+971 50 123 4567</small>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-secondary">HG-001234</span>
                            </td>
                            <td>
                                <span class="badge bg-warning text-dark">Gold</span>
                            </td>
                            <td>2 hours ago</td>
                            <td>Seven Hotel</td>
                            <td>
                                <a href="{{ route('guests.profile', 1) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-eye"></i> View
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 me-3">
                                        <i class="fas fa-user-circle fa-2x text-secondary"></i>
                                    </div>
                                    <div>
                                        <div class="fw-bold">Ahmed Al-Rashid</div>
                                        <small class="text-muted">+971 55 987 6543</small>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-secondary">HG-001235</span>
                            </td>
                            <td>
                                <span class="badge bg-light text-dark border">Silver</span>
                            </td>
                            <td>4 hours ago</td>
                            <td>Rayes</td>
                            <td>
                                <a href="{{ route('guests.profile', 2) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-eye"></i> View
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 me-3">
                                        <i class="fas fa-user-circle fa-2x text-secondary"></i>
                                    </div>
                                    <div>
                                        <div class="fw-bold">Maria Rodriguez</div>
                                        <small class="text-muted">+971 52 456 7890</small>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-secondary">HG-001236</span>
                            </td>
                            <td>
                                <span class="badge bg-danger">Platinum</span>
                            </td>
                            <td>6 hours ago</td>
                            <td>Coral Bay Beach</td>
                            <td>
                                <a href="{{ route('guests.profile', 3) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-eye"></i> View
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Venue Visits Chart
    const venueCtx = document.getElementById('venueChart').getContext('2d');
    new Chart(venueCtx, {
        type: 'doughnut',
        data: {
            labels: ['Seven Hotel', 'City Center Hotel', 'Coral Bay Resort', 'La Taverna', 'Rayes', 'Taiga Sky'],
            datasets: [{
                data: [35, 28, 22, 18, 15, 12],
                backgroundColor: [
                    '#007bff',
                    '#28a745',
                    '#ffc107',
                    '#dc3545',
                    '#6f42c1',
                    '#20c997'
                ]
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                }
            }
        }
    });

    // Loyalty Tier Chart
    const tierCtx = document.getElementById('tierChart').getContext('2d');
    new Chart(tierCtx, {
        type: 'bar',
        data: {
            labels: ['Silver', 'Gold', 'Platinum'],
            datasets: [{
                label: 'Members',
                data: [145, 78, 24],
                backgroundColor: [
                    '#6c757d',
                    '#ffc107',
                    '#dc3545'
                ]
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    function refreshData() {
        showToast('Data refreshed successfully!', 'success');
        // In a real app, this would fetch new data from the API
    }
</script>
@endsection