@extends('layouts.app')

@section('title', 'WHMCS Admin - Dashboard')
@section('page-title', 'Dashboard')

@section('breadcrumb')
    <span class="breadcrumb-item active">Dashboard</span>
@endsection

@section('content')
    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="stats-card">
                <div class="d-flex align-items-center">
                    <div class="stats-card-icon primary">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-card-value">{{ $stats['total_customers'] ?? 1247 }}</div>
                        <div class="stats-card-label">Total Customers</div>
                        <div
                            class="stats-card-change {{ ($stats['customers_change'] ?? 12) >= 0 ? 'positive' : 'negative' }}">
                            <i class="fas fa-arrow-{{ ($stats['customers_change'] ?? 12) >= 0 ? 'up' : 'down' }}"></i>
                            +{{ abs($stats['customers_change'] ?? 12) }}% from last month
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="stats-card">
                <div class="d-flex align-items-center">
                    <div class="stats-card-icon success">
                        <i class="fas fa-key"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-card-value">{{ $stats['active_licenses'] ?? 3456 }}</div>
                        <div class="stats-card-label">Active Licenses</div>
                        <div
                            class="stats-card-change {{ ($stats['licenses_change'] ?? 8) >= 0 ? 'positive' : 'negative' }}">
                            <i class="fas fa-arrow-{{ ($stats['licenses_change'] ?? 8) >= 0 ? 'up' : 'down' }}"></i>
                            +{{ abs($stats['licenses_change'] ?? 8) }}% from last month
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="stats-card">
                <div class="d-flex align-items-center">
                    <div class="stats-card-icon warning">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-card-value">${{ number_format($stats['monthly_revenue'] ?? 89247, 0) }}</div>
                        <div class="stats-card-label">Monthly Revenue</div>
                        <div
                            class="stats-card-change {{ ($stats['revenue_change'] ?? 15) >= 0 ? 'positive' : 'negative' }}">
                            <i class="fas fa-arrow-{{ ($stats['revenue_change'] ?? 15) >= 0 ? 'up' : 'down' }}"></i>
                            +{{ abs($stats['revenue_change'] ?? 15) }}% from last month
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="stats-card">
                <div class="d-flex align-items-center">
                    <div class="stats-card-icon danger">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-card-value">{{ $stats['support_tickets'] ?? 23 }}</div>
                        <div class="stats-card-label">Support Tickets</div>
                        <div
                            class="stats-card-change {{ ($stats['tickets_change'] ?? -5) >= 0 ? 'positive' : 'negative' }}">
                            <i class="fas fa-arrow-{{ ($stats['tickets_change'] ?? -5) >= 0 ? 'up' : 'down' }}"></i>
                            {{ $stats['tickets_change'] ?? -5 }}% from last month
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts and Recent Activity -->
    <div class="row">
        <!-- Revenue Chart -->
        <div class="col-xl-8 mb-4">
            <div class="whmcs-card">
                <div class="whmcs-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5>Revenue Overview</h5>
                        <div class="dropdown">
                            <button id="revenuePeriodBtn"
                                class="whmcs-btn whmcs-btn-sm whmcs-btn-outline-secondary whmcs-dropdown-toggle">
                                Last 30 Days
                                <i class="fas fa-chevron-down whmcs-dropdown-icon"></i>
                            </button>
                            <ul class="whmcs-dropdown-menu" id="revenuePeriodMenu">
                                <li><a class="whmcs-dropdown-item" href="#" data-period="7">Last 7 Days</a></li>
                                <li><a class="whmcs-dropdown-item active" href="#" data-period="30">Last 30 Days</a>
                                </li>
                                <li><a class="whmcs-dropdown-item" href="#" data-period="90">Last 90 Days</a></li>
                                <li><a class="whmcs-dropdown-item" href="#" data-period="365">Last Year</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="whmcs-card-body">
                    <div class="chart-container" style="height: 300px;">
                        <canvas id="revenueChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="col-xl-4 mb-4">
            <div class="whmcs-card">
                <div class="whmcs-card-header">
                    <h5>Quick Actions</h5>
                </div>
                <div class="whmcs-card-body">
                    <div class="d-grid gap-2">
                        <button class="whmcs-btn whmcs-btn-primary whmcs-action-btn" data-bs-toggle="modal"
                            data-bs-target="#addCustomerModal">
                            <i class="fas fa-user-plus"></i>
                            Add New Customer
                        </button>
                        <a class="whmcs-btn whmcs-btn-success whmcs-action-btn btn_modal"
                            href="{{ route('license.create') }}" type="button">
                            <i class="fas fa-key"></i>
                            Create License
                        </a>
                        <a class="whmcs-btn whmcs-btn-warning whmcs-action-btn" href="{{ route('support') }}">
                            <i class="fas fa-life-ring"></i>
                            View Support Tickets
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity and System Status -->
    <div class="row">
        <!-- Recent Activity -->
        <div class="col-xl-8 mb-4">
            <div class="whmcs-card">
                <div class="whmcs-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5>Recent Activity</h5>
                        <a href="{{-- {{ route('activity.index') }} --}}" class="whmcs-btn whmcs-btn-sm whmcs-btn-outline-primary">View
                            All</a>
                    </div>
                </div>
                <div class="whmcs-card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Time</th>
                                    <th>Activity</th>
                                    <th>User</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recent_activities ?? [] as $activity)
                                    <tr>
                                        <td>{{ $activity->created_at->diffForHumans() }}</td>
                                        <td>{{ $activity->description }}</td>
                                        <td>{{ $activity->customer->email ?? ($activity->user->name ?? 'System') }}</td>
                                        <td><span class="whmcs-status-badge active"><i
                                                    class="fas fa-circle"></i>{{ ucfirst($activity->action) }}</span></td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center">No Record Available</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- System Status -->
        <div class="col-xl-4 mb-4">
            @include('partials.system-status')
        </div>
    </div>



    <!-- Upcoming Renewals -->
    <div class="row">
        <div class="col-12">
            <div class="whmcs-card">
                <div class="whmcs-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5>Upcoming License Renewals</h5>
                        <a href="{{ route('licenses') }}" class="whmcs-btn whmcs-btn-sm whmcs-btn-outline-primary">View
                            All Licenses</a>
                    </div>
                </div>
                <div class="whmcs-card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Customer</th>
                                    <th>License</th>
                                    <th>Plan</th>
                                    <th>Renewal Date</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($upcomingRenewals ?? [] as $license)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="me-3">
                                                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center"
                                                        style="width: 32px; height: 32px; font-size: 0.875rem;">
                                                        {{ strtoupper(substr($license->customer->first_name, 0, 1) . substr($license->customer->last_name, 0, 1)) }}
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="whmcs-fw-bold">{{ $license->customer->first_name }}
                                                        {{ $license->customer->last_name }}</div>
                                                    <small
                                                        class="whmcs-text-muted">{{ $license->customer->email }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div>
                                                <div class="whmcs-fw-bold">{{ $license->product->name }}</div>
                                                <small class="whmcs-text-muted">{{ $license->license_key }}</small>
                                            </div>
                                        </td>
                                        <td><span
                                                class="whmcs-badge whmcs-badge-{{ $license->product->type }}">{{ ucfirst($license->product->type) }}</span>
                                        </td>
                                        <td>
                                            <div>{{ $license->expires_at->format('M d, Y') }}</div>
                                            <small
                                                class="whmcs-text-{{ $license->expires_at->diffInDays() <= 7 ? 'danger' : ($license->expires_at->diffInDays() <= 14 ? 'warning' : 'success') }}">
                                                {{ $license->expires_at->diffInDays() }} days remaining
                                            </small>
                                        </td>
                                        <td class="whmcs-fw-bold">${{ number_format($license->product->price, 2) }}</td>
                                        <td><span class="whmcs-status-badge {{ $license->status }}"><i
                                                    class="fas fa-circle"></i>{{ ucfirst($license->status) }}</span></td>
                                        <td>
                                            <div class="dropdown">
                                                <button
                                                    class="whmcs-btn whmcs-btn-sm whmcs-btn-outline-secondary whmcs-dropdown-toggle">
                                                    <i class="fas fa-cog"></i>
                                                    <i class="fas fa-chevron-down whmcs-dropdown-icon"></i>
                                                </button>
                                                <ul class="whmcs-dropdown-menu">
                                                    <li><a class="whmcs-dropdown-item"
                                                            href="{{ route('licenses.show', $license) }}"><i
                                                                class="fas fa-eye me-2"></i>View Details</a></li>
                                                    <li><a class="whmcs-dropdown-item" href="#"
                                                            data-license-action="renew"
                                                            data-license-id="{{ $license->id }}"><i
                                                                class="fas fa-sync me-2"></i>Renew Now</a></li>
                                                    <li><a class="whmcs-dropdown-item" href="#"
                                                            data-license-action="reminder"
                                                            data-license-id="{{ $license->id }}"><i
                                                                class="fas fa-envelope me-2"></i>Send Reminder</a></li>
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    <li><a class="whmcs-dropdown-item whmcs-text-warning" href="#"
                                                            data-license-action="suspend"
                                                            data-license-id="{{ $license->id }}"><i
                                                                class="fas fa-pause me-2"></i>Suspend</a></li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center text-muted">No upcoming renewals</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- @push('modals')
    @include('modals.add-customer')
    @include('modals.generate-invoice')
    @include('modals.renew-license')
    @include('modals.send-reminder')
    @include('modals.suspend-license')
@endpush --}}

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        $(document).ready(function() {
            let ctx = $('#revenueChart')[0].getContext('2d');
            let revenueChart;

            function initChart(labels = [], data = []) {
                if (revenueChart) {
                    revenueChart.destroy();
                }
                revenueChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Revenue (USD)',
                            data: data,
                            borderColor: '#4e73df',
                            backgroundColor: 'rgba(78, 115, 223, 0.1)',
                            fill: true,
                            tension: 0.3,
                            pointRadius: 3,
                            pointHoverRadius: 6,
                            borderWidth: 3
                        }]
                    },
                    options: {
                        scales: {
                            x: {
                                ticks: {
                                    maxRotation: 45,
                                    minRotation: 45
                                }
                            },
                            y: {
                                beginAtZero: true
                            }
                        },
                        plugins: {
                            legend: {
                                display: true
                            }
                        },
                        responsive: true,
                        maintainAspectRatio: false,
                    }
                });
            }

            function loadRevenueData(days = 30) {
                $.ajax({
                    url: '{{ route('api.revenue-chart') }}',
                    type: 'GET',
                    data: {
                        period: days
                    },
                    success: function(response) {
                        initChart(response.labels, response.amounts);
                    },
                    error: function() {
                        console.error('Failed to load revenue data');
                        initChart();
                    }
                });
            }

            // Dropdown click handler
            $('#revenuePeriodMenu a.whmcs-dropdown-item').on('click', function(e) {
                e.preventDefault();
                let period = $(this).data('period');

                // Update active class
                $('#revenuePeriodMenu a.whmcs-dropdown-item').removeClass('active');
                $(this).addClass('active');

                // Update button text
                $('#revenuePeriodBtn').html($(this).text() +
                    ' <i class="fas fa-chevron-down whmcs-dropdown-icon"></i>');

                // Load chart data
                loadRevenueData(period);
            });

            // Initial load with 30 days
            loadRevenueData(30);
        });


        $(document).on("submit", "form", function(e) {
            e.preventDefault();
            const submitBtn = $('#submitBtn');
            const originalText = submitBtn.html();
            // Disable submit button and show loading
            submitBtn.prop('disabled', true).html(
                '<i class="fa fa-spinner fa-spin me-2"></i>Submitting...');
            var form = $(this);
            var actionUrl = form.attr('action');
            $.ajax({
                url: actionUrl,
                type: "POST",
                data: $('#ajax_form').serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(data) {
                    submitBtn.prop('disabled', false).html(originalText);
                    if (data.errors) {
                        var errors = data.errors;
                        $.each(errors, function(field, error) {
                            toastr.error(error);
                        });
                    } else if (data.success) {
                        loadItems(1);
                        toastr.success(data.success);
                        /*      showToast(data.success); */
                        document.getElementById("ajax_form").reset();
                        $('#common_modal').modal('hide');
                    }

                },
                error: function(response) {
                    submitBtn.prop('disabled', false).html(originalText);
                    $('#loading-indicator').hide();
                    $.each(response.responseJSON.errors, function(field_name, error) {
                        $(document)
                            .find("[name=" + field_name + "]")
                            .after('<span style="color:red">' + error + "</span>");
                        toastr.error(error);
                    });
                },
            });
        });

        $(document).ready(function() {
            // Load system status
            loadSystemStatus();

            // Load revenue chart
            loadRevenueChart();

            // Handle license actions
            handleLicenseActions();

            // Refresh data every 30 seconds
            setInterval(function() {
                loadSystemStatus();
                loadRecentActivity();
            }, 30000);
        });

        function loadSystemStatus() {
            $.get('{{ route('api.system-status') }}', function(data) {
                $('#systemStatus').html(data.html);
            });
        }

        function loadRevenueChart(period = 30) {
            $.get('{{ route('api.revenue-chart') }}', {
                period: period
            }, function(data) {
                // Implement chart rendering here
                $('#revenueChart').html(
                    '<div class="text-center"><i class="fas fa-chart-line fa-3x mb-3"></i><p>Revenue Chart</p></div>'
                );
            });
        }

        function loadRecentActivity() {
            $.get('{{ route('api.recent-activity') }}', function(data) {
                $('#recentActivityTable').html(data.html);
            });
        }

        function handleLicenseActions() {
            $('[data-license-action]').on('click', function(e) {
                e.preventDefault();
                const action = $(this).data('license-action');
                const licenseId = $(this).data('license-id');

                switch (action) {
                    case 'renew':
                        $('#renewLicenseModal').modal('show');
                        break;
                    case 'reminder':
                        $('#sendReminderModal').modal('show');
                        break;
                    case 'suspend':
                        $('#suspendLicenseModal').modal('show');
                        break;
                }
            });
        }
    </script>
@endpush