@extends('layouts.admin')

@section('title', __('newsletter.dashboard'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">{{ __('newsletter.dashboard') }}</h1>
                    <p class="text-muted">{{ __('newsletter.manage_newsletter_subscriptions') }}</p>
                </div>
                <div>
                    <a href="{{ route('admin.newsletter.subscribers.create', ['locale' => app()->getLocale()]) }}"
                       class="btn btn-primary">
                        <i class="fas fa-plus"></i> {{ __('newsletter.add_subscriber') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                {{ __('newsletter.total_subscribers') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['total_subscribers']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                {{ __('newsletter.active_subscribers') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['active_subscribers']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-user-check fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                {{ __('newsletter.english_subscribers') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($language_distribution['en'] ?? 0) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-language fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                {{ __('newsletter.arabic_subscribers') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($language_distribution['ar'] ?? 0) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-language fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Additional Statistics -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-secondary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-secondary text-uppercase mb-1">
                                {{ __('newsletter.total_campaigns') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['total_campaigns']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-envelope fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-danger shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                {{ __('newsletter.active_campaigns') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['active_campaigns']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-play-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                {{ __('newsletter.sent_campaigns') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['sent_campaigns']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-paper-plane fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                {{ __('newsletter.total_templates') }}
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ number_format($stats['total_templates']) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-file-alt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('newsletter.quick_actions') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <a href="{{ route('admin.newsletter.subscribers.index', ['locale' => app()->getLocale()]) }}"
                               class="btn btn-outline-primary btn-block">
                                <i class="fas fa-list"></i> {{ __('newsletter.view_all_subscribers') }}
                            </a>
                        </div>
                        <div class="col-md-3 mb-3">
                            <a href="{{ route('admin.newsletter.campaigns.create', ['locale' => app()->getLocale()]) }}"
                               class="btn btn-outline-success btn-block">
                                <i class="fas fa-envelope"></i> {{ __('newsletter.create_campaign') }}
                            </a>
                        </div>
                        <div class="col-md-3 mb-3">
                            <a href="{{ route('admin.newsletter.templates.create', ['locale' => app()->getLocale()]) }}"
                               class="btn btn-outline-info btn-block">
                                <i class="fas fa-file-alt"></i> {{ __('newsletter.create_template') }}
                            </a>
                        </div>
                        <div class="col-md-3 mb-3">
                            <a href="{{ route('admin.newsletter.analytics.index', ['locale' => app()->getLocale()]) }}"
                               class="btn btn-outline-warning btn-block">
                                <i class="fas fa-chart-bar"></i> {{ __('newsletter.view_analytics') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts and Recent Activity -->
    <div class="row">
        <div class="col-xl-8 col-lg-7">
            <!-- Language Distribution Chart -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('newsletter.language_distribution') }}</h6>
                </div>
                <div class="card-body">
                    <canvas id="languageChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                </div>
            </div>

            <!-- Subscriber Growth Chart -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('newsletter.subscriber_growth') }}</h6>
                </div>
                <div class="card-body">
                    <canvas id="growthChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-5">
            <!-- Recent Subscribers -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">{{ __('newsletter.recent_subscribers') }}</h6>
                    <a href="{{ route('admin.newsletter.subscribers.index', ['locale' => app()->getLocale()]) }}"
                       class="btn btn-sm btn-primary">
                        {{ __('newsletter.view_all') }}
                    </a>
                </div>
                <div class="card-body">
                    @if($stats['total_subscribers'] > 0)
                        <div class="timeline">
                            @foreach(\App\Models\NewsletterSubscription::orderBy('subscribed_at', 'desc')->take(5)->get() as $subscriber)
                            <div class="timeline-item">
                                <div class="timeline-marker bg-primary"></div>
                                <div class="timeline-content">
                                    <div class="d-flex align-items-center">
                                        @if($subscriber->profile_picture)
                                            <img src="{{ asset('storage/' . $subscriber->profile_picture) }}"
                                                 class="rounded-circle mr-2"
                                                 width="30" height="30"
                                                 alt="{{ $subscriber->first_name }}">
                                        @else
                                            <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center mr-2"
                                                 style="width: 30px; height: 30px; font-size: 12px;">
                                                <i class="fas fa-user"></i>
                                            </div>
                                        @endif
                                        <div>
                                            <div class="font-weight-bold small">{{ $subscriber->first_name }} {{ $subscriber->last_name }}</div>
                                            <div class="text-muted small">{{ $subscriber->email }}</div>
                                        </div>
                                    </div>
                                    <small class="text-muted">{{ $subscriber->subscribed_at->diffForHumans() }}</small>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-users fa-3x text-gray-300 mb-3"></i>
                            <h6 class="text-gray-500">{{ __('newsletter.no_subscribers') }}</h6>
                            <p class="text-gray-400 small">{{ __('newsletter.no_subscribers_desc') }}</p>
                            <a href="{{ route('admin.newsletter.subscribers.create', ['locale' => app()->getLocale()]) }}"
                               class="btn btn-primary btn-sm">
                                <i class="fas fa-plus"></i> {{ __('newsletter.add_subscriber') }}
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>


                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: -40px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #e9ecef;
}

.timeline-content {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #007bff;
}
</style>
@endpush
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // Language Distribution Chart
    var languageCtx = document.getElementById('languageChart').getContext('2d');
    var languageData = @json($language_distribution);

    new Chart(languageCtx, {
        type: 'pie',
        data: {
            labels: ['English', 'العربية'],
            datasets: [{
                data: [languageData.en || 0, languageData.ar || 0],
                backgroundColor: ['#007bff', '#28a745'],
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
        }
    });

    // Subscriber Growth Chart
    var growthCtx = document.getElementById('growthChart').getContext('2d');
    var growthData = @json($subscriber_growth);

    var labels = [];
    var data = [];
    for (var i = 29; i >= 0; i--) {
        var date = new Date();
        date.setDate(date.getDate() - i);
        var dateStr = date.toISOString().split('T')[0];
        labels.push(dateStr);
        data.push(growthData[dateStr] ? growthData[dateStr].count : 0);
    }

    new Chart(growthCtx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: '{{ __("newsletter.new_subscribers") }}',
                data: data,
                borderColor: '#007bff',
                backgroundColor: 'rgba(0, 123, 255, 0.1)',
                fill: true,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
});
</script>
@endsection