@extends('backend.app')

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

@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <!-- Dashboard Header -->
            <div class="content-header row">
                <div class="content-header-left col-md-8 col-12 mb-2">
                    <h3 class="content-header-title mb-0">Dashboard Overview</h3>
                    <p class="text-muted mb-0">Welcome back, {{ auth()->user()->name }}! Here's what's happening.</p>
                </div>
                <div class="content-header-right col-md-4 col-12">
                    @if($totalPendingItems > 0)
                        <div class="alert alert-warning mb-0">
                            <div class="d-flex align-items-center">
                                <i data-feather="alert-triangle" class="mr-1"></i>
                                <div>
                                    <h6 class="mb-0">{{ $totalPendingItems }} items need attention</h6>
                                    <small class="text-muted">{{ $pendingCompanies }} companies, {{ $openSupportTickets }} tickets, {{ $pendingBookings }} bookings</small>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="alert alert-success mb-0">
                            <div class="d-flex align-items-center">
                                <i data-feather="check-circle" class="mr-1"></i>
                                <div>
                                    <h6 class="mb-0">All caught up!</h6>
                                    <small class="text-muted">No pending items</small>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

    <style>
        .kpi-card {
            border: none;
            border-radius: 1rem;
            box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
            transition: all 0.3s ease-in-out;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }
        .kpi-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 32px 0 rgba(34, 41, 47, 0.2);
        }
        .stat-icon {
            padding: 0.8rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>

    <div class="content-body">
        <!-- KPI Row -->
        <div class="row">
            <!-- Total Users -->
            <div class="col-xl col-md-4 col-sm-6 mb-2">
                <div class="card kpi-card">
                    <div class="card-body d-flex align-items-center">
                        <div class="stat-icon bg-light-primary mr-1">
                            <i data-feather="users" class="text-primary"></i>
                        </div>
                        <div>
                            <h4 class="font-weight-bolder mb-0">{{ number_format($totalUsers) }}</h4>
                            <p class="card-text font-small-3 mb-0">Users</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Active Companies -->
            <div class="col-xl col-md-4 col-sm-6 mb-2">
                <div class="card kpi-card">
                    <div class="card-body d-flex align-items-center">
                        <div class="stat-icon bg-light-info mr-1">
                            <i data-feather="briefcase" class="text-info"></i>
                        </div>
                        <div>
                            <h4 class="font-weight-bolder mb-0">{{ number_format($activeCompanies) }}</h4>
                            <p class="card-text font-small-3 mb-0">Companies</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total Bookings -->
            <div class="col-xl col-md-4 col-sm-6 mb-2">
                <div class="card kpi-card">
                    <div class="card-body d-flex align-items-center">
                        <div class="stat-icon bg-light-warning mr-1">
                            <i data-feather="calendar" class="text-warning"></i>
                        </div>
                        <div>
                            <h4 class="font-weight-bolder mb-0">{{ number_format($totalBookings) }}</h4>
                            <p class="card-text font-small-3 mb-0">Bookings</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Active Tickets -->
            <div class="col-xl col-md-6 col-sm-6 mb-2">
                <div class="card kpi-card">
                    <div class="card-body d-flex align-items-center">
                        <div class="stat-icon bg-light-danger mr-1">
                            <i data-feather="life-buoy" class="text-danger"></i>
                        </div>
                        <div>
                            <h4 class="font-weight-bolder mb-0">{{ $openSupportTickets + $pendingSupportTickets }}</h4>
                            <p class="card-text font-small-3 mb-0">Active Tickets</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Revenue -->
            <div class="col-xl col-md-6 col-sm-12 mb-2">
                <div class="card kpi-card">
                    <div class="card-body d-flex align-items-center pt-4">
                        <div class="stat-icon bg-light-success mr-1">
                            <i data-feather="dollar-sign" class="text-success"></i>
                        </div>
                        <div>
                            <h4 class="font-weight-bolder mb-0">${{ number_format($totalMonthlyRevenue, 0) }}</h4>
                            <p class="card-text font-small-3 mb-0">Revenue</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

                <!-- Second Row: Trends & Pulse -->
                <div class="row match-height">
                    <!-- Booking Trends -->
                    <div class="col-lg-8 col-12">
                        <div class="card">
                            <div class="card-header border-bottom">
                                <h4 class="card-title">Booking Trends (Last 30 Days)</h4>
                            </div>
                            <div class="card-body pt-2">
                                <div id="booking-trends-chart"></div>
                            </div>
                        </div>
                    </div>
                    <!-- Platform Pulse -->
                    <div class="col-lg-4 col-12">
                        <div class="card">
                            <div class="card-header border-bottom">
                                <h4 class="card-title">Platform Performance</h4>
                            </div>
                            <div class="card-body pt-4">
                                <div class="mb-2">
                                    <div class="d-flex justify-content-between align-items-center mb-50">
                                        <span class="font-weight-bolder">Avg Rating</span>
                                        <span class="font-weight-bolder text-warning">{{ number_format($averageRating, 1) }}/5.0</span>
                                    </div>
                                    <div class="progress progress-bar-warning" style="height: 6px;">
                                        <div class="progress-bar" role="progressbar" style="width: {{ ($averageRating / 5) * 100 }}%"></div>
                                    </div>
                                </div>
                                <div class="mb-2">
                                    <div class="d-flex justify-content-between align-items-center mb-50">
                                        <span class="font-weight-bolder">Resolution Rate</span>
                                        <span class="font-weight-bolder text-success">{{ number_format($supportResolutionRate, 0) }}%</span>
                                    </div>
                                    <div class="progress progress-bar-success" style="height: 6px;">
                                        <div class="progress-bar" role="progressbar" style="width: {{ $supportResolutionRate }}%"></div>
                                    </div>
                                </div>
                                <div class="mb-0">
                                    <div class="d-flex justify-content-between align-items-center mb-50">
                                        <span class="font-weight-bolder">Booking Success</span>
                                        <span class="font-weight-bolder text-primary">{{ number_format($successRate, 0) }}%</span>
                                    </div>
                                    <div class="progress progress-bar-primary" style="height: 6px;">
                                        <div class="progress-bar" role="progressbar" style="width: {{ $successRate }}%"></div>
                                    </div>
                                </div>
                                <hr>
                                <div class="d-flex justify-content-between">
                                    <small class="text-muted">{{ $totalCategories }} Categories</small>
                                    <small class="text-muted">{{ $totalServices }} Services</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Third Row: Support Analytics -->
                <div class="row match-height">
                    <!-- Support Volume Trend -->
                    <div class="col-lg-8 col-12">
                        <div class="card">
                            <div class="card-header border-bottom">
                                <h4 class="card-title">Support Volume (Last 30 Days)</h4>
                            </div>
                            <div class="card-body pt-2">
                                <div id="support-trends-chart"></div>
                            </div>
                        </div>
                    </div>
                    <!-- Ticket Priority Share -->
                    <div class="col-lg-4 col-12">
                        <div class="card">
                            <div class="card-header border-bottom">
                                <h4 class="card-title">Ticket Priorities</h4>
                            </div>
                            <div class="card-body">
                                <div id="support-priority-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Fourth Row: Action & Distribution -->
                <div class="row match-height">
                    <!-- Subscription Growth -->
                    <div class="col-lg-4 col-12">
                        <div class="card">
                            <div class="card-header border-bottom">
                                <h4 class="card-title">Subscription Growth</h4>
                            </div>
                            <div class="card-body">
                                <div id="subscription-growth-chart"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Urgent Support Tickets -->
                    <div class="col-lg-4 col-12">
                        <div class="card card-developer-meetup">
                            <div class="card-header border-bottom">
                                <h4 class="card-title">Urgent Tickets</h4>
                                <span class="badge badge-light-danger">{{ $urgentSupportTickets->count() }} Urgent</span>
                            </div>
                            <div class="card-body p-0">
                                <div class="list-group list-group-flush">
                                    @forelse($urgentSupportTickets as $ticket)
                                    <a href="{{ route('admin.support.show', $ticket->id) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                        <div class="d-flex align-items-center">
                                            <div class="avatar bg-light-danger mr-1">
                                                <div class="avatar-content">{{ substr($ticket->user->name ?? 'U', 0, 1) }}</div>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">{{ \Illuminate\Support\Str::limit($ticket->subject, 25) }}</h6>
                                                <small class="text-muted">{{ $ticket->created_at->diffForHumans() }}</small>
                                            </div>
                                        </div>
                                        <i data-feather="chevron-right" class="text-muted"></i>
                                    </a>
                                    @empty
                                    <div class="p-2 text-center text-muted">No urgent tickets</div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Category Share -->
                    <div class="col-lg-4 col-12">
                        <div class="card">
                            <div class="card-header border-bottom">
                                <h4 class="card-title">Category Share</h4>
                            </div>
                            <div class="card-body">
                                <div id="category-distribution-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Recent Activity Tables -->
                <div class="row">
                    <!-- Recent Bookings -->
                    <div class="col-xl-8 col-12">
                        <div class="card">
                            <div class="card-header border-bottom">
                                <h4 class="card-title">Recent Reservation History</h4>
                                <a href="{{ route('admin.bookings.index') }}" class="btn btn-sm btn-flat-primary">View All</a>
                            </div>
                            <div class="card-body pt-4">
                                <div class="table-responsive card-datatable">
                                    <table class="table table-hover mb-0">
                                        <thead>
                                            <tr>
                                                <th class="py-1">ID</th>
                                                <th class="py-1">Client</th>
                                                <th class="py-1">Service / Company</th>
                                                <th class="py-1">Amount</th>
                                                <th class="py-1">Date</th>
                                                <th class="py-1">Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($recentBookings as $booking)
                                            <tr>
                                                <td><span class="font-weight-bold">#{{ $booking->id }}</span></td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="avatar bg-light-primary mr-50">
                                                            <img src="{{ $booking->user->avatar ?? asset('backend/images/default-avatar.png') }}" 
                                                                 onerror="this.src='{{ asset('backend/images/default-avatar.png') }}'; this.onerror=null;"
                                                                 width="32" height="32" alt="Avatar">
                                                        </div>
                                                        <div class="d-flex flex-column">
                                                            <span class="font-weight-bolder font-small-3">{{ $booking->user->name }}</span>
                                                            <small class="text-muted font-small-2">{{ $booking->user->email ?? '' }}</small>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="d-flex flex-column">
                                                        <span class="font-weight-bolder text-primary font-small-3">{{ $booking->service->name ?? 'Standard' }}</span>
                                                        <small class="text-muted font-small-2">{{ $booking->company->name ?? 'N/A' }}</small>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="font-weight-bolder text-dark">${{ number_format($booking->total_amount, 2) }}</span>
                                                </td>
                                                <td>
                                                    <div class="d-flex flex-column">
                                                        <span class="font-small-3">{{ $booking->booking_date->format('M d, Y') }}</span>
                                                        <small class="text-muted font-small-2">{{ $booking->booking_time ?? '' }}</small>
                                                    </div>
                                                </td>
                                                <td>
                                                    @php
                                                        $statusClasses = [
                                                            'pending' => 'badge-light-warning',
                                                            'confirmed' => 'badge-light-success',
                                                            'completed' => 'badge-light-primary',
                                                            'cancelled' => 'badge-light-danger'
                                                        ];
                                                        $class = $statusClasses[$booking->status] ?? 'badge-light-secondary';
                                                    @endphp
                                                    <span class="badge badge-pill {{ $class }} px-1">{{ ucfirst($booking->status) }}</span>
                                                </td>
                                            </tr>
                                            @empty
                                            <tr>
                                                <td colspan="6" class="text-center py-5">
                                                    <div class="no-data-placeholder">
                                                        <i data-feather="calendar" class="text-muted mb-1" style="width: 48px; height: 48px; opacity: 0.2;"></i>
                                                        <h5 class="text-muted">No Recent Reservations Found</h5>
                                                        <p class="text-muted font-small-3">When customers book services, they will appear here.</p>
                                                        <a href="{{ route('admin.bookings.index') }}" class="btn btn-sm btn-outline-primary mt-1">Refresh List</a>
                                                    </div>
                                                </td>
                                            </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Latest Reviews -->
                    <div class="col-xl-4 col-12">
                        <div class="card">
                            <div class="card-header border-bottom">
                                <h4 class="card-title">Customer Feedback</h4>
                            </div>
                            <div class="card-body">
                                <div class="timeline ms-50">
                                    @foreach($recentReviews->take(4) as $review)
                                    <div class="timeline-item border-left-{{ $review->rating >= 4 ? 'success' : ($review->rating >= 3 ? 'warning' : 'danger') }} pb-1 ml-1" style="border-left: 2px solid; padding-left: 15px;">
                                        <div class="d-flex justify-content-between mb-50">
                                            <h6 class="font-weight-bolder mb-0">{{ $review->user->name }}</h6>
                                            <small class="text-muted">{{ $review->created_at->diffForHumans() }}</small>
                                        </div>
                                        <div class="d-flex align-items-center mb-50">
                                            @for($i=1; $i<=5; $i++)
                                                <i data-feather="star" class="{{ $i <= $review->rating ? 'text-warning' : 'text-muted' }}" style="width: 12px; fill: {{ $i <= $review->rating ? 'currentColor' : 'none' }}"></i>
                                            @endfor
                                        </div>
                                        <p class="font-small-3 mb-0 text-truncate-2">{{ $review->review }}</p>
                                        <small class="text-primary">{{ $review->company->name ?? 'N/A' }}</small>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Access Footer -->
                <div class="row">
                    <div class="col-12 text-center mb-2">
                        <div class="divider">
                            <div class="divider-text">Quick Navigation</div>
                        </div>
                        <div class="d-flex flex-wrap justify-content-center gap-2">
                            <a href="{{ route('user.list') }}" class="btn btn-flat-secondary"><i data-feather="users" class="mr-25"></i> Users</a>
                            <a href="{{ route('company.index') }}" class="btn btn-flat-secondary"><i data-feather="briefcase" class="mr-25"></i> Companies</a>
                            <a href="{{ route('admin.bookings.index') }}" class="btn btn-flat-secondary"><i data-feather="calendar" class="mr-25"></i> Reservations</a>
                            <a href="{{ route('admin.support.user.index') }}" class="btn btn-flat-secondary"><i data-feather="life-buoy" class="mr-25"></i> Support</a>
                            <a href="{{ route('admin.setting') }}" class="btn btn-flat-secondary"><i data-feather="settings" class="mr-25"></i> Settings</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
<script>
    $(document).ready(function() {
        // Feather Icons
        if (typeof feather !== 'undefined') {
            feather.replace();
        }

        // TOOLTIPS
        $('[data-toggle="tooltip"]').tooltip();

        // CHARTS THEME COLORS
        var $primary = '#7367f0',
            $success = '#28c76f',
            $danger = '#ea5455',
            $warning = '#ff9f43',
            $info = '#00cfe8',
            $label_color = '#b9b9c3';

        // 1. BOOKING TRENDS CHART
        var bookingTrendsOptions = {
            chart: {
                height: 300,
                type: 'line',
                toolbar: { show: false },
                dropShadow: {
                    enabled: true,
                    top: 18,
                    left: 7,
                    blur: 10,
                    opacity: 0.2
                }
            },
            colors: [$primary],
            dataLabels: { enabled: false },
            stroke: {
                curve: 'smooth',
                width: 4
            },
            series: [{
                name: 'Bookings',
                data: @json($bookingTrends->pluck('count'))
            }],
            grid: {
                borderColor: '#e7e7e7',
                row: {
                    colors: ['#f3f3f3', 'transparent'],
                    opacity: 0.5
                },
            },
            xaxis: {
                categories: @json($bookingTrends->pluck('date')),
                labels: {
                    style: { colors: $label_color },
                    rotate: -45,
                    offsetY: 10
                }
            },
            yaxis: {
                title: { text: 'Bookings' },
                labels: { style: { colors: $label_color } }
            },
            tooltip: {
                x: { format: 'dd MMM' }
            }
        };
        new ApexCharts(document.querySelector("#booking-trends-chart"), bookingTrendsOptions).render();

        // 2. SUBSCRIPTION GROWTH CHART
        var subGrowthOptions = {
            chart: {
                height: 250,
                type: 'bar',
                toolbar: { show: false }
            },
            plotOptions: {
                bar: {
                    columnWidth: '45%',
                    distributed: true,
                    borderRadius: 4
                }
            },
            colors: [$primary, $success, $warning, $info, $danger, '#7367f0'],
            series: [{
                name: 'New Subscriptions',
                data: @json($subscriptionGrowth->pluck('count'))
            }],
            xaxis: {
                categories: @json($subscriptionGrowth->pluck('month')),
                labels: { style: { colors: $label_color } }
            },
            yaxis: {
                labels: { style: { colors: $label_color } }
            },
            legend: { show: false }
        };
        new ApexCharts(document.querySelector("#subscription-growth-chart"), subGrowthOptions).render();

        // 3. CATEGORY DISTRIBUTION CHART
        var categoryOptions = {
            chart: {
                height: 300,
                type: 'donut',
            },
            colors: [$primary, $success, $warning, $info, $danger],
            series: @json($categoryDistribution->pluck('services_count')),
            labels: @json($categoryDistribution->pluck('title')),
            legend: {
                position: 'bottom',
                labels: { colors: $label_color }
            },
            dataLabels: { enabled: false },
            plotOptions: {
                pie: {
                    donut: {
                        size: '70%',
                        labels: {
                            show: true,
                            total: {
                                show: true,
                                label: 'Total',
                                formatter: function(w) {
                                    return w.globals.seriesTotals.reduce((a, b) => a + b, 0)
                                }
                            }
                        }
                    }
                }
            }
        };
        new ApexCharts(document.querySelector("#category-distribution-chart"), categoryOptions).render();

        // 4. SUPPORT VOLUME TREND CHART
        var supportTrendsOptions = {
            chart: {
                height: 300,
                type: 'area',
                toolbar: { show: false },
                sparkline: { enabled: false }
            },
            colors: [$danger],
            dataLabels: { enabled: false },
            stroke: {
                curve: 'smooth',
                width: 3
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0.5,
                    opacityTo: 0,
                    stops: [0, 90, 100]
                }
            },
            series: [{
                name: 'Tickets',
                data: @json($supportTrends->pluck('count'))
            }],
            xaxis: {
                categories: @json($supportTrends->pluck('date')),
                labels: { style: { colors: $label_color } }
            },
            yaxis: {
                labels: { style: { colors: $label_color } }
            },
            tooltip: { x: { format: 'dd MMM' } }
        };
        new ApexCharts(document.querySelector("#support-trends-chart"), supportTrendsOptions).render();

        // 5. SUPPORT PRIORITY CHART
        var priorityOptions = {
            chart: {
                height: 300,
                type: 'pie',
            },
            colors: [$danger, $warning, $info, $success],
            series: @json($supportPriorityDistribution->pluck('count')),
            labels: @json($supportPriorityDistribution->pluck('priority')),
            legend: {
                position: 'bottom',
                labels: { colors: $label_color }
            },
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    return Math.round(val) + "%"
                }
            }
        };
        new ApexCharts(document.querySelector("#support-priority-chart"), priorityOptions).render();
    });
</script>
@endpush