@extends('layouts.app')

@section('title', 'Admin Dashboard')

@section('styles')
<style>
    /* Dashboard Styles */
    .admin-dashboard {
        background-color: #f8fafc;
        min-height: calc(100vh - 60px);
    }
    
    .admin-sidebar {
        background-color: #2d3748;
        color: #fff;
        min-height: calc(100vh - 60px);
        position: fixed;
        width: 250px;
        transition: all 0.3s;
        z-index: 1000;
    }
    
    .admin-sidebar .nav-link {
        color: rgba(255, 255, 255, 0.7);
        padding: 0.75rem 1.25rem;
        border-left: 3px solid transparent;
        transition: all 0.2s;
    }
    
    .admin-sidebar .nav-link:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.1);
        border-left-color: rgba(255, 255, 255, 0.5);
    }
    
    .admin-sidebar .nav-link.active {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.1);
        border-left-color: #3490dc;
    }
    
    .admin-sidebar .nav-link i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
    }
    
    .admin-content {
        margin-left: 250px;
        padding: 20px;
        transition: all 0.3s;
    }
    
    .admin-header {
        background-color: #fff;
        border-bottom: 1px solid #e2e8f0;
        padding: 15px 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    }
    
    .stat-card {
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }
    
    .stat-card .card-body {
        padding: 20px;
    }
    
    .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .stat-icon.bg-primary-light {
        background-color: rgba(52, 144, 220, 0.2);
        color: #3490dc;
    }
    
    .stat-icon.bg-success-light {
        background-color: rgba(56, 193, 114, 0.2);
        color: #38c172;
    }
    
    .stat-icon.bg-warning-light {
        background-color: rgba(246, 153, 63, 0.2);
        color: #f6993f;
    }
    
    .stat-icon.bg-danger-light {
        background-color: rgba(227, 52, 47, 0.2);
        color: #e3342f;
    }
    
    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 5px;
    }
    
    .stat-label {
        color: #718096;
        font-size: 0.875rem;
    }
    
    .chart-card {
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
    }
    
    .chart-card .card-header {
        background-color: #fff;
        border-bottom: 1px solid #e2e8f0;
        padding: 15px 20px;
    }
    
    .chart-card .card-body {
        padding: 20px;
    }
    
    .recent-activity-card {
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }
    
    .activity-item {
        padding: 15px 0;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .activity-item:last-child {
        border-bottom: none;
    }
    
    .activity-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        margin-right: 15px;
    }
    
    .activity-content {
        flex: 1;
    }
    
    .activity-time {
        color: #718096;
        font-size: 0.75rem;
    }
    
    /* Responsive Sidebar */
    @media (max-width: 991.98px) {
        .admin-sidebar {
            margin-left: -250px;
        }
        
        .admin-sidebar.active {
            margin-left: 0;
        }
        
        .admin-content {
            margin-left: 0;
        }
        
        .admin-content.active {
            margin-left: 250px;
        }
        
        .sidebar-toggle {
            display: block !important;
        }
    }
</style>
@endsection

@section('content')
<div class="admin-dashboard">
    <!-- Sidebar -->
    <div class="admin-sidebar">
        <div class="p-3 border-bottom">
            <h5 class="text-white mb-0">Admin Dashboard</h5>
        </div>
        <ul class="nav flex-column mt-3">
            <li class="nav-item">
                <a class="nav-link active" href="{{ route('admin.dashboard') }}">
                    <i class="fas fa-tachometer-alt"></i> Dashboard
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('users.index') }}">
                    <i class="fas fa-users"></i> Users
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('categories.index') }}">
                    <i class="fas fa-tags"></i> Categories
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('services.index') }}">
                    <i class="fas fa-concierge-bell"></i> Services
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('employees.index') }}">
                    <i class="fas fa-user-tie"></i> Employees
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('appointments.index') }}">
                    <i class="fas fa-calendar-check"></i> Appointments
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('payments.index') }}">
                    <i class="fas fa-credit-card"></i> Payments
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ route('reports.appointments') }}">
                    <i class="fas fa-chart-bar"></i> Reports
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ url('/settings') }}">
                    <i class="fas fa-cog"></i> Settings
                </a>
            </li>
            <li class="nav-item mt-3">
                <a class="nav-link" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                    <i class="fas fa-sign-out-alt"></i> Logout
                </a>
            </li>
        </ul>
    </div>
    
    <!-- Content -->
    <div class="admin-content">
        <!-- Toggle Button for Mobile -->
        <button class="btn btn-primary sidebar-toggle d-lg-none mb-3">
            <i class="fas fa-bars"></i>
        </button>
        
        <!-- Header -->
        <div class="admin-header d-flex justify-content-between align-items-center">
            <h4 class="mb-0">Dashboard Overview</h4>
            <div>
                <span class="text-muted me-2">Welcome, Admin</span>
                <div class="dropdown d-inline-block">
                    <button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-user-circle"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
                        <li><a class="dropdown-item" href="#">My Profile</a></li>
                        <li><a class="dropdown-item" href="#">Settings</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                                Logout
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- Stats Cards -->
        <div class="row mb-4">
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card stat-card h-100">
                    <div class="card-body">
                        <div class="stat-icon bg-primary-light">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-value">2,845</div>
                        <div class="stat-label">Total Users</div>
                        <div class="mt-2 text-success">
                            <i class="fas fa-arrow-up me-1"></i> 12.5% <small class="text-muted">from last month</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card stat-card h-100">
                    <div class="card-body">
                        <div class="stat-icon bg-success-light">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <div class="stat-value">1,257</div>
                        <div class="stat-label">Appointments</div>
                        <div class="mt-2 text-success">
                            <i class="fas fa-arrow-up me-1"></i> 8.3% <small class="text-muted">from last month</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card stat-card h-100">
                    <div class="card-body">
                        <div class="stat-icon bg-warning-light">
                            <i class="fas fa-concierge-bell"></i>
                        </div>
                        <div class="stat-value">124</div>
                        <div class="stat-label">Active Services</div>
                        <div class="mt-2 text-success">
                            <i class="fas fa-arrow-up me-1"></i> 5.7% <small class="text-muted">from last month</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card stat-card h-100">
                    <div class="card-body">
                        <div class="stat-icon bg-danger-light">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <div class="stat-value">$24,582</div>
                        <div class="stat-label">Total Revenue</div>
                        <div class="mt-2 text-success">
                            <i class="fas fa-arrow-up me-1"></i> 15.2% <small class="text-muted">from last month</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Charts -->
        <div class="row mb-4">
            <div class="col-lg-8 mb-4 mb-lg-0">
                <div class="card chart-card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Appointments Overview</h5>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                This Month
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                                <li><a class="dropdown-item" href="#">Today</a></li>
                                <li><a class="dropdown-item" href="#">This Week</a></li>
                                <li><a class="dropdown-item active" href="#">This Month</a></li>
                                <li><a class="dropdown-item" href="#">This Year</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="appointmentsChart" height="300"></canvas>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="card chart-card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Service Categories</h5>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
                                This Month
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton2">
                                <li><a class="dropdown-item" href="#">Today</a></li>
                                <li><a class="dropdown-item" href="#">This Week</a></li>
                                <li><a class="dropdown-item active" href="#">This Month</a></li>
                                <li><a class="dropdown-item" href="#">This Year</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="categoriesChart" height="300"></canvas>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Recent Activity and Quick Actions -->
        <div class="row">
            <div class="col-lg-8 mb-4 mb-lg-0">
                <div class="card recent-activity-card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Recent Activity</h5>
                        <a href="#" class="btn btn-sm btn-outline-primary">View All</a>
                    </div>
                    <div class="card-body">
                        <div class="activity-item d-flex align-items-start">
                            <div class="activity-icon bg-primary-light">
                                <i class="fas fa-user-plus"></i>
                            </div>
                            <div class="activity-content">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <strong>New user registered</strong>
                                    <span class="activity-time">5 min ago</span>
                                </div>
                                <p class="mb-0">John Doe registered a new account as a customer.</p>
                            </div>
                        </div>
                        
                        <div class="activity-item d-flex align-items-start">
                            <div class="activity-icon bg-success-light">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <div class="activity-content">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <strong>New appointment booked</strong>
                                    <span class="activity-time">25 min ago</span>
                                </div>
                                <p class="mb-0">Sarah Johnson booked a Dental Checkup for tomorrow at 10:00 AM.</p>
                            </div>
                        </div>
                        
                        <div class="activity-item d-flex align-items-start">
                            <div class="activity-icon bg-warning-light">
                                <i class="fas fa-star"></i>
                            </div>
                            <div class="activity-content">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <strong>New service rating</strong>
                                    <span class="activity-time">1 hour ago</span>
                                </div>
                                <p class="mb-0">Michael Rodriguez rated Yoga Class with 5 stars.</p>
                            </div>
                        </div>
                        
                        <div class="activity-item d-flex align-items-start">
                            <div class="activity-icon bg-danger-light">
                                <i class="fas fa-credit-card"></i>
                            </div>
                            <div class="activity-content">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <strong>Payment received</strong>
                                    <span class="activity-time">2 hours ago</span>
                                </div>
                                <p class="mb-0">Payment of $75 received for Dental Checkup from Emily Chen.</p>
                            </div>
                        </div>
                        
                        <div class="activity-item d-flex align-items-start">
                            <div class="activity-icon bg-primary-light">
                                <i class="fas fa-concierge-bell"></i>
                            </div>
                            <div class="activity-content">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <strong>New service added</strong>
                                    <span class="activity-time">3 hours ago</span>
                                </div>
                                <p class="mb-0">Serenity Spa added a new service: Hot Stone Massage.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Quick Actions</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="{{ route('users.create') }}" class="btn btn-outline-primary">
                                <i class="fas fa-user-plus me-2"></i> Add New User
                            </a>
                            <a href="{{ route('services.create') }}" class="btn btn-outline-primary">
                                <i class="fas fa-plus-circle me-2"></i> Add New Service
                            </a>
                            <a href="{{ route('categories.create') }}" class="btn btn-outline-primary">
                                <i class="fas fa-tags me-2"></i> Add New Category
                            </a>
                            <a href="{{ route('appointments.create') }}" class="btn btn-outline-primary">
                                <i class="fas fa-calendar-plus me-2"></i> Create Appointment
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">System Status</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span>Server Load</span>
                                <span>28%</span>
                            </div>
                            <div class="progress" style="height: 5px;">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 28%;" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span>Database Usage</span>
                                <span>52%</span>
                            </div>
                            <div class="progress" style="height: 5px;">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 52%;" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span>Storage Usage</span>
                                <span>74%</span>
                            </div>
                            <div class="progress" style="height: 5px;">
                                <div class="progress-bar bg-danger" role="progressbar" style="width: 74%;" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <span>System Version</span>
                            <span class="badge bg-primary">v1.2.5</span>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mt-2">
                            <span>Last Update</span>
                            <span>2 days ago</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Toggle sidebar on mobile
        $('.sidebar-toggle').on('click', function() {
            $('.admin-sidebar').toggleClass('active');
            $('.admin-content').toggleClass('active');
        });
        
        // Appointments Chart - Using optimized chart library
        var appointmentsCtx = document.getElementById('appointmentsChart').getContext('2d');
        var appointmentsData = {
            labels: ['1 May', '5 May', '10 May', '15 May', '20 May', '25 May', '30 May'],
            datasets: [{
                label: 'Completed',
                data: [65, 78, 66, 86, 93, 82, 108],
                borderColor: '#38c172',
                backgroundColor: 'rgba(56, 193, 114, 0.1)',
                borderWidth: 2,
                tension: 0.3,
                fill: true
            }, {
                label: 'Pending',
                data: [28, 35, 23, 32, 38, 27, 42],
                borderColor: '#f6993f',
                backgroundColor: 'rgba(246, 153, 63, 0.1)',
                borderWidth: 2,
                tension: 0.3,
                fill: true
            }, {
                label: 'Cancelled',
                data: [12, 15, 10, 8, 14, 11, 16],
                borderColor: '#e3342f',
                backgroundColor: 'rgba(227, 52, 47, 0.1)',
                borderWidth: 2,
                tension: 0.3,
                fill: true
            }]
        };
        
        // Initialize optimized line chart
        var appointmentsChart = window.chartHelpers.initOptimizedChart(
            appointmentsCtx,
            'line',
            appointmentsData,
            {
                plugins: {
                    tooltip: {
                        callbacks: {
                            title: function(tooltipItems) {
                                return 'Date: ' + tooltipItems[0].label;
                            }
                        }
                    }
                }
            }
        );
        
        // Categories Chart - Using optimized chart library
        var categoriesCtx = document.getElementById('categoriesChart').getContext('2d');
        var categoriesData = {
            labels: ['Health & Beauty', 'Medical', 'Professional', 'Education', 'Fitness'],
            datasets: [{
                data: [35, 25, 15, 10, 15],
                backgroundColor: [
                    '#3490dc',
                    '#e3342f',
                    '#38c172',
                    '#f6993f',
                    '#6574cd'
                ],
                borderWidth: 0
            }]
        };
        
        // Initialize optimized doughnut chart
        var categoriesChart = window.chartHelpers.initOptimizedChart(
            categoriesCtx,
            'doughnut',
            categoriesData,
            {
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.parsed || 0;
                                const total = context.dataset.data.reduce((acc, data) => acc + data, 0);
                                const percentage = Math.round((value / total) * 100);
                                return `${label}: ${percentage}% (${value})`;
                            }
                        }
                    }
                }
            }
        );
    });
</script>
@endsection