@extends(decide_template('layouts.master-dashboard'))

@section('title', trans('menu.dashboard'))

@section('page_styles')
<link href="{{ asset('themes/glass/glass-dashboard.css') }}?v={{ $local_version }}.3" rel="stylesheet" type="text/css" />
@endsection

@section('content')
@php
    $is_client = isClient();
    $super_admin = superAdmin(auth()->user());
@endphp

{{-- Dashboard Alerts --}}
<div style="padding: 0 0 8px 0;">
    @if(!$utcTimeFlag && !$is_client)
    <div class="alert alert-warning" style="border-radius:var(--glass-radius-sm);margin-bottom:10px;">
        <strong>{{ trans('dashboard.glass.utc_warning_title') }}</strong> {{ trans('dashboard.glass.utc_warning_desc') }}
    </div>
    @endif

    @if($issues > 0 && !$is_client)
    <div class="alert alert-danger" style="border-radius:var(--glass-radius-sm);margin-bottom:10px;">
        <strong>{{ trans('dashboard.glass.issues_found', ['count' => $issues]) }}</strong>
        <a href="{{ route('issue.index') }}" class="btn btn-sm btn-danger" style="margin-left:10px;">{{ trans('dashboard.glass.view_issues') }}</a>
    </div>
    @endif
</div>

{{-- Bento Grid --}}
<div class="bento-grid glass-stagger">

    {{-- Row 1: Stat Cards --}}
    <div class="bento-stat-card bento-stat-card--brand glass-animate-in">
        <div class="bento-stat-card__header">
            <div class="bento-stat-card__icon bento-stat-card__icon--brand">
                <i data-lucide="send" style="width:20px;height:20px;"></i>
            </div>
        </div>
        <div class="bento-stat-card__value" id="glass-stat-campaigns">{{ number_format($campaigns_stats) }}</div>
        <div class="bento-stat-card__label">{{ trans('dashboard.glass.total_campaigns') }}</div>
    </div>

    <div class="bento-stat-card bento-stat-card--success glass-animate-in">
        <div class="bento-stat-card__header">
            <div class="bento-stat-card__icon bento-stat-card__icon--success">
                <i data-lucide="users" style="width:20px;height:20px;"></i>
            </div>
        </div>
        <div class="bento-stat-card__value" id="glass-stat-subscribers">{{ number_format($subscribers_stats) }}</div>
        <div class="bento-stat-card__label">{{ trans('dashboard.glass.total_subscribers') }}</div>
    </div>

    <div class="bento-stat-card bento-stat-card--info glass-animate-in">
        <div class="bento-stat-card__header">
            <div class="bento-stat-card__icon bento-stat-card__icon--info">
                <i data-lucide="list" style="width:20px;height:20px;"></i>
            </div>
        </div>
        <div class="bento-stat-card__value" id="glass-stat-lists">{{ number_format($lists_stats) }}</div>
        <div class="bento-stat-card__label">{{ trans('dashboard.glass.total_lists') }}</div>
    </div>

    <div class="bento-stat-card bento-stat-card--warning glass-animate-in">
        <div class="bento-stat-card__header">
            <div class="bento-stat-card__icon bento-stat-card__icon--warning">
                <i data-lucide="globe" style="width:20px;height:20px;"></i>
            </div>
        </div>
        <div class="bento-stat-card__value" id="glass-stat-domains">{{ number_format($domain_stats) }}</div>
        <div class="bento-stat-card__label">{{ trans('dashboard.glass.total_domains') }}</div>
    </div>

    {{-- Row 2: Chart + Live Events + Cron Status --}}
    <div class="bento-chart-card bento-span-2 glass-animate-in">
        <div class="bento-chart-card__header">
            <div class="bento-chart-card__title">{{ trans('dashboard.glass.sending_statistics') }}</div>
            <div style="display:flex;gap:6px;">
                <button class="glass-btn glass-btn-ghost glass-btn-sm stat-period-btn active" data-period="today" onclick="glassGetStats('today')">{{ trans('dashboard.glass.today') }}</button>
                <button class="glass-btn glass-btn-ghost glass-btn-sm stat-period-btn" data-period="week" onclick="glassGetStats('week')">{{ trans('dashboard.glass.this_week') }}</button>
                <button class="glass-btn glass-btn-ghost glass-btn-sm stat-period-btn" data-period="month" onclick="glassGetStats('month')">{{ trans('dashboard.glass.this_month') }}</button>
            </div>
        </div>
        <div class="bento-chart-card__body">
            <div id="glass-stats-container" style="display:grid;grid-template-columns:repeat(5,1fr);gap:12px;">
                <div class="glass-panel" style="padding:14px;text-align:center;">
                    <div style="font-size:22px;font-weight:700;color:var(--brand-color);" id="glass-sent-count">-</div>
                    <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">{{ trans('dashboard.glass.sent') }}</div>
                </div>
                <div class="glass-panel" style="padding:14px;text-align:center;">
                    <div style="font-size:22px;font-weight:700;color:var(--glass-success);" id="glass-opened-count">-</div>
                    <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">{{ trans('dashboard.glass.opened') }}</div>
                </div>
                <div class="glass-panel" style="padding:14px;text-align:center;">
                    <div style="font-size:22px;font-weight:700;color:var(--glass-info);" id="glass-clicked-count">-</div>
                    <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">{{ trans('dashboard.glass.clicked') }}</div>
                </div>
                <div class="glass-panel" style="padding:14px;text-align:center;">
                    <div style="font-size:22px;font-weight:700;color:var(--glass-warning);" id="glass-bounced-count">-</div>
                    <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">{{ trans('dashboard.glass.bounced') }}</div>
                </div>
                <div class="glass-panel" style="padding:14px;text-align:center;">
                    <div style="font-size:22px;font-weight:700;color:var(--glass-danger);" id="glass-failed-count">-</div>
                    <div style="font-size:11px;color:var(--text-muted);margin-top:4px;">{{ trans('dashboard.glass.failed') }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="bento-events-card glass-animate-in">
        <div class="bento-events-card__header">
            <div class="bento-events-card__title">
                <span class="bento-events-card__live-dot"></span>
                {{ trans('dashboard.glass.live_events') }}
            </div>
        </div>
        <div class="bento-events-card__list" id="glass-live-events">
            <div style="text-align:center;padding:20px;color:var(--text-muted);">
                <i data-lucide="loader" class="glass-spin" style="width:20px;height:20px;display:inline-block;"></i>
                <div style="margin-top:8px;">{{ trans('common.label.loading') }}</div>
            </div>
        </div>
    </div>

    <div class="bento-cron-card glass-animate-in">
        <div class="bento-cron-card__indicator {{ $is_running ? 'bento-cron-card__indicator--running' : 'bento-cron-card__indicator--stopped' }}">
            @if($is_running)
                <i data-lucide="check-circle" style="width:24px;height:24px;"></i>
            @else
                <i data-lucide="alert-circle" style="width:24px;height:24px;"></i>
            @endif
        </div>
        <div class="bento-cron-card__info">
            <div class="bento-cron-card__title">{{ trans('dashboard.glass.cron_status') }}</div>
            <div class="bento-cron-card__time">{{ $time }}</div>
        </div>
    </div>

    {{-- Row 3: Recent Broadcasts + Top Domains --}}
    <div class="bento-chart-card bento-span-2 glass-animate-in">
        <div class="bento-chart-card__header">
            <div class="bento-chart-card__title">{{ trans('dashboard.glass.recent_broadcasts') }}</div>
            @if(routeAccess('campaign.index'))
            <a href="{{ route('campaign.index') }}" class="glass-btn glass-btn-ghost" style="font-size:12px;">{{ trans('common.button.view_all') }}</a>
            @endif
        </div>
        <div class="bento-chart-card__body" id="glass-recent-broadcasts">
            <div style="text-align:center;padding:20px;color:var(--text-muted);">
                <i data-lucide="loader" class="glass-spin" style="width:20px;height:20px;display:inline-block;"></i>
            </div>
        </div>
    </div>

    <div class="bento-chart-card bento-span-2 glass-animate-in">
        <div class="bento-chart-card__header">
            <div class="bento-chart-card__title">{{ trans('dashboard.glass.top_domains') }}</div>
        </div>
        <div class="bento-chart-card__body" id="glass-top-domains">
            <div style="text-align:center;padding:20px;color:var(--text-muted);">
                <i data-lucide="loader" class="glass-spin" style="width:20px;height:20px;display:inline-block;"></i>
            </div>
        </div>
    </div>

    {{-- Row 4: Activity Log + Quick Actions --}}
    <div class="bento-events-card bento-span-2 glass-animate-in">
        <div class="bento-events-card__header">
            <div class="bento-events-card__title">{{ trans('dashboard.glass.recent_activities') }}</div>
            @if(routeAccess('activity-log.index'))
            <a href="{{ route('activity-log.index') }}" class="glass-btn glass-btn-ghost" style="font-size:12px;">{{ trans('common.button.view_all') }}</a>
            @endif
        </div>
        <div class="bento-events-card__list" id="glass-activity-logs">
            <div style="text-align:center;padding:20px;color:var(--text-muted);">
                <i data-lucide="loader" class="glass-spin" style="width:20px;height:20px;display:inline-block;"></i>
            </div>
        </div>
    </div>

    @if(!$is_client)
    <div class="bento-chart-card bento-span-2 glass-animate-in">
        <div class="bento-chart-card__header">
            <div class="bento-chart-card__title">{{ trans('dashboard.glass.quick_actions') }}</div>
        </div>
        <div class="bento-quick-actions">
            @if(routeAccess('campaign.create'))
            <a href="{{ route('campaign.create') }}" class="bento-quick-action">
                <i data-lucide="plus-circle" style="width:16px;height:16px;color:var(--brand-color);"></i>
                {{ trans('dashboard.glass.new_campaign') }}
            </a>
            @endif
            @if(routeAccess('list.create'))
            <a href="{{ route('list.create') }}" class="bento-quick-action">
                <i data-lucide="users" style="width:16px;height:16px;color:var(--glass-success);"></i>
                {{ trans('dashboard.glass.new_list') }}
            </a>
            @endif
            @if(routeAccess('email-template.create'))
            <a href="{{ route('email-template.create') }}" class="bento-quick-action">
                <i data-lucide="layout-template" style="width:16px;height:16px;color:var(--glass-info);"></i>
                {{ trans('dashboard.glass.new_template') }}
            </a>
            @endif
            @if(routeAccess('domain.create'))
            <a href="{{ route('domain.create') }}" class="bento-quick-action">
                <i data-lucide="globe" style="width:16px;height:16px;color:var(--glass-warning);"></i>
                {{ trans('dashboard.glass.add_domain') }}
            </a>
            @endif
        </div>
    </div>
    @endif

    @if(!empty($c_issues) && count($c_issues) > 0 && !$is_client)
    <div class="bento-issues-card bento-span-4 glass-animate-in">
        <div class="bento-issues-card__header">
            <div class="bento-issues-card__title">
                <i data-lucide="alert-triangle" style="width:16px;height:16px;color:var(--glass-danger);display:inline;"></i>
                {{ trans('dashboard.glass.critical_issues') }}
            </div>
        </div>
        @foreach($c_issues as $issue)
        <div class="bento-issue-item" id="li_issue_{{ $issue->ref_id }}">
            <div class="glass-dot glass-dot-danger" style="margin-top:6px;"></div>
            <div style="flex:1;">
                <div style="color:var(--text-primary);font-size:13px;">{!! $issue->description !!}</div>
                <div style="font-size:11px;color:var(--text-muted);margin-top:2px;">
                    {{ \Carbon\Carbon::parse($issue->created_at)->diffForHumans() }}
                </div>
            </div>
            @if($issue->button)
            <button class="glass-btn glass-btn-ghost ret" id="btn_{{ $issue->ref_id }}" data="{{ $issue->button }}" style="font-size:12px;">
                {{ trans('dashboard.glass.resolve') }}
            </button>
            @endif
        </div>
        @endforeach
    </div>
    @endif

</div>
@endsection

@section('dashboard_scripts')
<script type="text/javascript">
$(document).ready(function() {
    // Initialize Lucide icons
    if (typeof lucide !== 'undefined') lucide.createIcons();

    // Load initial data
    glassGetStats('today');
    glassLoadLiveEvents();
    glassLoadRecentBroadcasts();
    glassLoadTopDomains();
    glassLoadActivityLogs();

    // Auto-refresh live events
    @if(!empty($app_settings['auto_refresh_live_events']))
    setInterval(glassLoadLiveEvents, {{ $app_settings['auto_refresh_live_events'] * 1000 }});
    @else
    setInterval(glassLoadLiveEvents, 30000);
    @endif
});

function glassGetStats(period) {
    // Update active button
    $('.stat-period-btn').removeClass('active');
    $('.stat-period-btn[data-period="' + period + '"]').addClass('active');

    $.ajax({
        url: app_url + '/dashboard/counters',
        type: 'GET',
        data: { period: period },
        dataType: 'json',
        success: function(data) {
            if (data) {
                $('#glass-sent-count').text(data.sent || '0');
                $('#glass-opened-count').text(data.opened || '0');
                $('#glass-clicked-count').text(data.clicked || '0');
                $('#glass-bounced-count').text(data.bounced || '0');
                $('#glass-failed-count').text(data.failed || '0');
            }
        },
        error: function() {
            $('#glass-sent-count, #glass-opened-count, #glass-clicked-count, #glass-bounced-count, #glass-failed-count').text('0');
        }
    });
}

function glassLoadLiveEvents() {
    $.ajax({
        url: app_url + '/live-events',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            var html = '';
            if (data && data.length > 0) {
                data.forEach(function(event) {
                    var iconColor = 'var(--brand-color)';
                    var bgColor = 'rgba(28,175,154,0.15)';
                    if (event.type === 'opened') { iconColor = 'var(--glass-success)'; bgColor = 'rgba(52,211,153,0.15)'; }
                    else if (event.type === 'clicked') { iconColor = 'var(--glass-info)'; bgColor = 'rgba(96,165,250,0.15)'; }
                    else if (event.type === 'bounced' || event.type === 'failed') { iconColor = 'var(--glass-danger)'; bgColor = 'rgba(248,113,113,0.15)'; }

                    html += '<div class="bento-event-item">' +
                        '<div class="bento-event-item__icon" style="background:' + bgColor + ';color:' + iconColor + ';">' +
                        '<i class="fa fa-circle" style="font-size:8px;"></i></div>' +
                        '<div class="bento-event-item__text">' + (event.description || event.email || '') + '</div>' +
                        '<div class="bento-event-item__time">' + (event.time || '') + '</div></div>';
                });
            } else {
                html = '<div style="text-align:center;padding:20px;color:var(--text-muted);">{{ trans("dashboard.glass.no_live_events") }}</div>';
            }
            $('#glass-live-events').html(html);
        },
        error: function() {
            $('#glass-live-events').html('<div style="text-align:center;padding:20px;color:var(--text-muted);">{{ trans("dashboard.glass.no_live_events") }}</div>');
        }
    });
}

function glassLoadRecentBroadcasts() {
    $.ajax({
        url: app_url + '/dashboard/recentBroadcasts',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            var html = '';
            if (data && data.length > 0) {
                html = '<div style="overflow-x:auto;"><table style="width:100%;border-collapse:collapse;">' +
                    '<thead><tr style="border-bottom:1px solid var(--glass-border);">' +
                    '<th style="padding:8px 12px;text-align:left;font-size:12px;color:var(--text-muted);font-weight:500;">{{ trans("dashboard.glass.campaign") }}</th>' +
                    '<th style="padding:8px 12px;text-align:left;font-size:12px;color:var(--text-muted);font-weight:500;">{{ trans("dashboard.glass.status") }}</th>' +
                    '<th style="padding:8px 12px;text-align:right;font-size:12px;color:var(--text-muted);font-weight:500;">{{ trans("dashboard.glass.sent") }}</th></tr></thead><tbody>';
                data.forEach(function(item) {
                    var statusColor = 'var(--text-muted)';
                    if (item.status === 'completed') statusColor = 'var(--glass-success)';
                    else if (item.status === 'processing') statusColor = 'var(--brand-color)';
                    else if (item.status === 'paused') statusColor = 'var(--glass-warning)';
                    else if (item.status === 'failed') statusColor = 'var(--glass-danger)';

                    html += '<tr style="border-bottom:1px solid #e5e5e5;">' +
                        '<td style="padding:10px 12px;font-size:13px;color:var(--text-primary);">' + (item.campaign_name || item.name || '-') + '</td>' +
                        '<td style="padding:10px 12px;"><span class="glass-badge" style="background:' + statusColor + '22;color:' + statusColor + ';">' + (item.status || '-') + '</span></td>' +
                        '<td style="padding:10px 12px;text-align:right;font-size:13px;color:var(--text-secondary);">' + (item.sent || item.total_sent || '0') + '</td></tr>';
                });
                html += '</tbody></table></div>';
            } else {
                html = '<div style="text-align:center;padding:20px;color:var(--text-muted);">{{ trans("dashboard.glass.no_recent_broadcasts") }}</div>';
            }
            $('#glass-recent-broadcasts').html(html);
        },
        error: function() {
            $('#glass-recent-broadcasts').html('<div style="text-align:center;padding:20px;color:var(--text-muted);">{{ trans("dashboard.glass.no_recent_broadcasts") }}</div>');
        }
    });
}

function glassLoadTopDomains() {
    $.ajax({
        url: app_url + '/dashboard/topDomains',
        type: 'GET',
        data: { period: 'month' },
        dataType: 'json',
        success: function(data) {
            var html = '';
            if (data && data.length > 0) {
                html = '<div style="display:flex;flex-direction:column;gap:8px;">';
                data.forEach(function(item) {
                    var pct = item.percentage || 0;
                    html += '<div style="display:flex;align-items:center;gap:12px;">' +
                        '<div style="flex:1;font-size:13px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">' + (item.domain || '-') + '</div>' +
                        '<div style="width:120px;height:6px;background:#e5e5e5;border-radius:3px;overflow:hidden;"><div style="height:100%;background:var(--brand-color);border-radius:3px;width:' + pct + '%;"></div></div>' +
                        '<div style="font-size:12px;color:var(--text-muted);min-width:40px;text-align:right;">' + pct + '%</div></div>';
                });
                html += '</div>';
            } else {
                html = '<div style="text-align:center;padding:20px;color:var(--text-muted);">{{ trans("dashboard.glass.no_data") }}</div>';
            }
            $('#glass-top-domains').html(html);
        },
        error: function() {
            $('#glass-top-domains').html('<div style="text-align:center;padding:20px;color:var(--text-muted);">{{ trans("dashboard.glass.no_data") }}</div>');
        }
    });
}

function glassLoadActivityLogs() {
    $.ajax({
        url: app_url + '/dashboard/activityLogs',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            var html = '';
            if (data && data.length > 0) {
                data.forEach(function(item) {
                    html += '<div class="bento-event-item">' +
                        '<div class="bento-event-item__icon" style="background:rgba(28,175,154,0.15);color:var(--brand-color);">' +
                        '<i class="fa fa-circle" style="font-size:6px;"></i></div>' +
                        '<div class="bento-event-item__text">' + (item.description || item.activity || '') + '</div>' +
                        '<div class="bento-event-item__time">' + (item.time || item.created_at || '') + '</div></div>';
                });
            } else {
                html = '<div style="text-align:center;padding:20px;color:var(--text-muted);">{{ trans("dashboard.glass.no_activities") }}</div>';
            }
            $('#glass-activity-logs').html(html);
        },
        error: function() {
            $('#glass-activity-logs').html('<div style="text-align:center;padding:20px;color:var(--text-muted);">{{ trans("dashboard.glass.no_activities") }}</div>');
        }
    });
}
</script>
@endsection