@extends('admin::layouts.master')
@php
    $pageTitle = 'داشبورد ';
@endphp
@section('css')

    <style>
        .card-animate {
            transition: all 0.3s ease;
        }
        .border-dashed {
            border: 2px dashed #e9ecef !important;
        }
        .border-dashed:hover {
            border-color: #405189 !important;
            background-color: #f8f9fa;
        }
    </style>
@endsection
@section('title', 'داشبورد ')
@section('content')

    @php
        // داده‌های فیک برای نمایش
        $stats = [
            'total_automations' => 47,
            'active_automations' => 32,
            'total_runs_today' => 1247,
            'success_rate' => 87.5,
            'pending_runs' => 23,
            'failed_runs_today' => 18,
            'total_messages_sent' => 8456,
            'active_users' => 156
        ];

        $recent_automations = [
            (object)[
                'id' => 1,
                'name' => 'پاسخ به کامنت اینستاگرام',
                'type' => 'instagram',
                'status' => 'active',
                'runs_today' => 245,
                'success_rate' => 92
            ],
            (object)[
                'id' => 2,
                'name' => 'پیامک یادآوری پرداخت',
                'type' => 'sms',
                'status' => 'active',
                'runs_today' => 189,
                'success_rate' => 85
            ],
            (object)[
                'id' => 3,
                'name' => 'اتوماسیون تلگرام',
                'type' => 'telegram',
                'status' => 'inactive',
                'runs_today' => 0,
                'success_rate' => 0
            ]
        ];

        $platform_stats = [
            'instagram' => ['count' => 28, 'success' => 92, 'color' => 'danger'],
            'telegram' => ['count' => 12, 'success' => 88, 'color' => 'info'],
            'sms' => ['count' => 7, 'success' => 85, 'color' => 'success']
        ];
    @endphp

    <div class="row">
        <!-- آمار کلی -->
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="mb-0">{{ $stats['total_automations'] }}</h4>
                            <p class="text-muted mb-0">کل اتوماسیون‌ها</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="avatar-sm bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                <i class="ri-rocket-line text-primary fs-18"></i>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="progress progress-sm">
                            <div class="progress-bar bg-primary" style="width: {{ ($stats['active_automations'] / $stats['total_automations']) * 100 }}%"></div>
                        </div>
                        <small class="text-muted">{{ $stats['active_automations'] }} اتوماسیون فعال</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="mb-0">{{ $stats['total_runs_today'] }}</h4>
                            <p class="text-muted mb-0">اجراهای امروز</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="avatar-sm bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                <i class="ri-play-circle-line text-success fs-18"></i>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="progress progress-sm">
                            <div class="progress-bar bg-success" style="width: {{ $stats['success_rate'] }}%"></div>
                        </div>
                        <small class="text-muted">نرخ موفقیت: {{ $stats['success_rate'] }}%</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="mb-0">{{ $stats['total_messages_sent'] }}</h4>
                            <p class="text-muted mb-0">پیام‌های ارسالی</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="avatar-sm bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                <i class="ri-chat-3-line text-info fs-18"></i>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="progress progress-sm">
                            <div class="progress-bar bg-info" style="width: 75%"></div>
                        </div>
                        <small class="text-muted">+۱۲٪ نسبت به دیروز</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="mb-0">{{ $stats['active_users'] }}</h4>
                            <p class="text-muted mb-0">کاربران فعال</p>
                        </div>
                        <div class="flex-shrink-0">
                            <div class="avatar-sm bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                <i class="ri-user-line text-warning fs-18"></i>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div class="progress progress-sm">
                            <div class="progress-bar bg-warning" style="width: 65%"></div>
                        </div>
                        <small class="text-muted">+۸ کاربر جدید امروز</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- آمار پلتفرم‌ها -->
        <div class="col-xl-4">
            <div class="card">
                <div class="card-header border-bottom py-3">
                    <h5 class="card-title mb-0">
                        <i class="ri-pie-chart-line align-bottom me-2"></i>توزیع پلتفرم‌ها
                    </h5>
                </div>
                <div class="card-body">
                    @foreach($platform_stats as $platform => $data)
                        <div class="d-flex align-items-center mb-3">
                            <div class="flex-shrink-0 me-3">
                                <div class="avatar-xs bg-{{ $data['color'] }}-subtle rounded-circle d-flex align-items-center justify-content-center">
                                    <i class="ri-{{ $platform == 'instagram' ? 'instagram' : ($platform == 'telegram' ? 'telegram' : 'message') }}-line text-{{ $data['color'] }} fs-16"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="mb-1">{{ $platform == 'instagram' ? 'اینستاگرام' : ($platform == 'telegram' ? 'تلگرام' : 'SMS') }}</h6>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="flex-grow-1">
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-{{ $data['color'] }}" style="width: {{ ($data['count'] / $stats['total_automations']) * 100 }}%"></div>
                                        </div>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <span class="text-muted fs-12">{{ $data['count'] }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- اتوماسیون‌های فعال -->
        <div class="col-xl-8">
            <div class="card">
                <div class="card-header border-bottom py-3 d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="ri-list-check align-bottom me-2"></i>اتوماسیون‌های فعال
                    </h5>
                    <a href="{{ route('admin.automations.index') }}" class="btn btn-sm btn-soft-primary">مشاهده همه</a>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-borderless table-hover align-middle mb-0">
                            <thead class="table-light text-muted">
                            <tr>
                                <th>اتوماسیون</th>
                                <th class="text-center">پلتفرم</th>
                                <th class="text-center">اجراهای امروز</th>
                                <th class="text-center">موفقیت</th>
                                <th class="text-center">وضعیت</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($recent_automations as $automation)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0 me-3">
                                                <div class="avatar-xs bg-light rounded-circle d-flex align-items-center justify-content-center">
                                                    <i class="ri-{{ $automation->type == 'instagram' ? 'instagram' : ($automation->type == 'telegram' ? 'telegram' : 'message') }}-line text-muted fs-16"></i>
                                                </div>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="mb-0">{{ $automation->name }}</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                    <span class="badge bg-{{ $automation->type == 'instagram' ? 'danger' : ($automation->type == 'telegram' ? 'info' : 'success') }}-subtle text-{{ $automation->type == 'instagram' ? 'danger' : ($automation->type == 'telegram' ? 'info' : 'success') }}">
                                        {{ $automation->type == 'instagram' ? 'اینستاگرام' : ($automation->type == 'telegram' ? 'تلگرام' : 'SMS') }}
                                    </span>
                                    </td>
                                    <td class="text-center">
                                        <span class="fw-semibold">{{ $automation->runs_today }}</span>
                                    </td>
                                    <td class="text-center">
                                        <div class="d-flex align-items-center gap-2 justify-content-center">
                                        <span class="fw-semibold {{ $automation->success_rate >= 90 ? 'text-success' : ($automation->success_rate >= 80 ? 'text-warning' : 'text-danger') }}">
                                            {{ $automation->success_rate }}%
                                        </span>
                                            <div class="progress progress-sm" style="width: 60px;">
                                                <div class="progress-bar bg-{{ $automation->success_rate >= 90 ? 'success' : ($automation->success_rate >= 80 ? 'warning' : 'danger') }}"
                                                     style="width: {{ $automation->success_rate }}%"></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        @if($automation->status == 'active')
                                            <span class="badge bg-success-subtle text-success">
                                        <i class="ri-checkbox-circle-line align-bottom me-1"></i>فعال
                                    </span>
                                        @else
                                            <span class="badge bg-secondary-subtle text-secondary">
                                        <i class="ri-stop-circle-line align-bottom me-1"></i>غیرفعال
                                    </span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- لاگ‌های اخیر -->
        <div class="col-xl-6">
            <div class="card">
                <div class="card-header border-bottom py-3">
                    <h5 class="card-title mb-0">
                        <i class="ri-file-list-line align-bottom me-2"></i>اجراهای اخیر
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="flex-grow-1">
                        <span class="badge bg-warning-subtle text-warning me-2">
                            <i class="ri-time-line align-bottom me-1"></i>
                            {{ $stats['pending_runs'] }} در صف
                        </span>
                            <span class="badge bg-danger-subtle text-danger">
                            <i class="ri-close-circle-line align-bottom me-1"></i>
                            {{ $stats['failed_runs_today'] }} خطا امروز
                        </span>
                        </div>
                    </div>

                    <div class="vstack gap-3">
                        @foreach([1,2,3] as $log)
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar-xs bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                        <i class="ri-check-line text-success fs-14"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0 fs-13">اتوماسیون پاسخ به کامنت اجرا شد</h6>
                                    <small class="text-muted">۲ دقیقه پیش - ۱۲ کاربر</small>
                                </div>
                                <div class="flex-shrink-0">
                                    <span class="badge bg-success-subtle text-success fs-11">موفق</span>
                                </div>
                            </div>
                        @endforeach

                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0 me-3">
                                <div class="avatar-xs bg-danger bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                    <i class="ri-close-line text-danger fs-14"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="mb-0 fs-13">خطا در ارسال پیامک</h6>
                                <small class="text-muted">۵ دقیقه پیش - محدودیت نرخ</small>
                            </div>
                            <div class="flex-shrink-0">
                                <span class="badge bg-danger-subtle text-danger fs-11">خطا</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- فعالیت‌های سریع -->
        <div class="col-xl-6">
            <div class="card">
                <div class="card-header border-bottom py-3">
                    <h5 class="card-title mb-0">
                        <i class="ri-flashlight-line align-bottom me-2"></i>عملیات سریع
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">

                        <div class="col-sm-6">
                            <a href="{{ route('admin.automations.index') }}" class="card card-animate border-dashed h-100 text-center">
                                <div class="card-body d-flex flex-column justify-content-center">
                                    <div class="avatar-md bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3">
                                        <i class="ri-file-list-line text-info fs-20"></i>
                                    </div>
                                    <h6 class="mb-1">مشاهده اتومیشن ها</h6>
                                    <small class="text-muted">تاریخچه اجراها</small>
                                </div>
                            </a>
                        </div>
{{--                        <div class="col-sm-6">--}}
{{--                            <a href="{{ route('admin.templates.index') }}" class="card card-animate border-dashed h-100 text-center">--}}
{{--                                <div class="card-body d-flex flex-column justify-content-center">--}}
{{--                                    <div class="avatar-md bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3">--}}
{{--                                        <i class="ri-layout-line text-success fs-20"></i>--}}
{{--                                    </div>--}}
{{--                                    <h6 class="mb-1">تمپلیت‌ها</h6>--}}
{{--                                    <small class="text-muted">قالب‌های آماده</small>--}}
{{--                                </div>--}}
{{--                            </a>--}}
{{--                        </div>--}}
{{--                        <div class="col-sm-6">--}}
{{--                            <a href="{{ route('admin.settings.integrations') }}" class="card card-animate border-dashed h-100 text-center">--}}
{{--                                <div class="card-body d-flex flex-column justify-content-center">--}}
{{--                                    <div class="avatar-md bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3">--}}
{{--                                        <i class="ri-plug-line text-warning fs-20"></i>--}}
{{--                                    </div>--}}
{{--                                    <h6 class="mb-1">اتصال‌ها</h6>--}}
{{--                                    <small class="text-muted">مدیریت پلتفرم‌ها</small>--}}
{{--                                </div>--}}
{{--                            </a>--}}
{{--                        </div>--}}
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // انیمیشن کارت‌ها
            const cards = document.querySelectorAll('.card-animate');
            cards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-5px)';
                    this.style.transition = 'all 0.3s ease';
                });

                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                });
            });
        });
    </script>

@endsection