@extends('admin::layouts.master')
@php
    $pageTitle = 'جزئیات اتوماسیون';
@endphp

@section('title', 'جزئیات اتوماسیون')
@section('content')

    @php
        // داده فیک برای نمایش جزئیات
        $automation = (object)[
            'id'=>1,
            'name'=>'پست هفتگی اینستاگرام',
            'type'=>'instagram',
            'status'=>'active',
            'description'=>'این اتوماسیون هر هفته یک پست در اکانت اینستاگرام منتشر می‌کند. محتوا به صورت خودکار از بانک محتوایی انتخاب شده و در زمان مشخص شده پست می‌شود.',
            'last_run'=>\Carbon\Carbon::now()->subDays(1),
            'next_run'=>\Carbon\Carbon::now()->addDays(6),
            'total_runs'=>12,
            'success'=>12,
            'failed'=>0,
            'created_at'=>\Carbon\Carbon::now()->subMonths(2),
            'config'=>[
                'schedule'=>'0 9 * * 1', // every monday 9:00
                'account'=>'@my_instagram_account',
                'hashtags'=>'#طراحی #گرافیک #ایران',
                'post_type'=>'image',
                'auto_caption'=>true,
                'timezone'=>'Asia/Tehran'
            ]
        ];
    @endphp

        <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0 me-3">
                    <div class="avatar-md bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                        <i class="ri-instagram-fill text-primary fs-20"></i>
                    </div>
                </div>
                <div class="flex-grow-1">
                    <h4 class="mb-1 fw-semibold">{{ $automation->name }}</h4>
                    <div class="hstack gap-3 flex-wrap">
                        <span class="badge bg-primary bg-opacity-10 text-primary">
                            <i class="ri-instagram-line me-1"></i>اینستاگرام
                        </span>
                        <span class="text-muted">
                            <i class="ri-calendar-line me-1"></i>ایجاد شده در {{ $automation->created_at->format('d M Y') }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="hstack gap-2 justify-content-end">
                <button class="btn btn-primary btn-run-manual" data-id="{{ $automation->id }}" disabled>
                    <i class="ri-play-circle-line align-bottom me-1"></i>اجرا دستی
                </button>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Automation Details Card -->
            <div class="card">
                <div class="card-header border-bottom py-3">
                    <h5 class="card-title mb-0">
                        <i class="ri-information-line align-bottom me-2"></i>جزئیات اتوماسیون
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <h6 class="mb-2 text-muted">توضیحات</h6>
                        <p class="mb-0">{{ $automation->description }}</p>
                    </div>

                    <hr>

                    <h6 class="mb-3 text-muted">تنظیمات اتوماسیون</h6>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="border rounded p-3 bg-light">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="ri-time-line text-success me-2"></i>
                                    <span class="fw-medium">برنامه زمانی</span>
                                </div>
                                <p class="mb-0 text-muted">هر دوشنبه ساعت ۹:۰۰ صبح</p>
                                <small class="text-muted"><code>{{ $automation->config['schedule'] }}</code></small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="border rounded p-3 bg-light">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="ri-user-line text-info me-2"></i>
                                    <span class="fw-medium">اکانت مرتبط</span>
                                </div>
                                <p class="mb-0 text-muted">{{ $automation->config['account'] }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="border rounded p-3 bg-light">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="ri-image-line text-warning me-2"></i>
                                    <span class="fw-medium">نوع پست</span>
                                </div>
                                <p class="mb-0 text-muted">عکس</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="border rounded p-3 bg-light">
                                <div class="d-flex align-items-center mb-2">
                                    <i class="ri-hashtag text-purple me-2"></i>
                                    <span class="fw-medium">هشتگ‌ها</span>
                                </div>
                                <p class="mb-0 text-muted">{{ $automation->config['hashtags'] }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Execution History Card -->
            <div class="card mt-4">
                <div class="card-header border-bottom py-3">
                    <h5 class="card-title mb-0">
                        <i class="ri-history-line align-bottom me-2"></i>تاریخچه اجرا
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <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 ms-3">
                                    <h6 class="mb-0">{{ $automation->success }}</h6>
                                    <p class="text-muted mb-0">موفق</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <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 ms-3">
                                    <h6 class="mb-0">{{ $automation->failed }}</h6>
                                    <p class="text-muted mb-0">ناموفق</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="border rounded p-3">
                                <h6 class="mb-2 text-muted">آخرین اجرا</h6>
                                <div class="d-flex align-items-center">
                                    <i class="ri-calendar-check-line text-success me-2"></i>
                                    <div>
                                        <p class="mb-0 fw-medium">{{ $automation->last_run->format('d M Y') }}</p>
                                        <small class="text-muted">{{ $automation->last_run->format('H:i') }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="border rounded p-3">
                                <h6 class="mb-2 text-muted">اجرای بعدی</h6>
                                <div class="d-flex align-items-center">
                                    <i class="ri-time-line text-info me-2"></i>
                                    <div>
                                        <p class="mb-0 fw-medium">{{ $automation->next_run->format('d M Y') }}</p>
                                        <small class="text-muted">{{ $automation->next_run->format('H:i') }} ({{ $automation->next_run->diffForHumans() }})</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Status Card -->
            <div class="card">
                <div class="card-header border-bottom py-3">
                    <h5 class="card-title mb-0">
                        <i class="ri-pulse-line align-bottom me-2"></i>وضعیت
                    </h5>
                </div>
                <div class="card-body text-center">
                    @if($automation->status=='active')
                        <div class="avatar-lg bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3">
                            <i class="ri-checkbox-circle-line text-success fs-24"></i>
                        </div>
                        <h5 class="text-success mb-1">فعال</h5>
                        <p class="text-muted mb-3">اتوماسیون در حال اجرا است</p>
                    @elseif($automation->status=='inactive')
                        <div class="avatar-lg bg-secondary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3">
                            <i class="ri-stop-circle-line text-secondary fs-24"></i>
                        </div>
                        <h5 class="text-secondary mb-1">غیرفعال</h5>
                        <p class="text-muted mb-3">اتوماسیون متوقف شده</p>
                    @else
                        <div class="avatar-lg bg-danger bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3">
                            <i class="ri-error-warning-line text-danger fs-24"></i>
                        </div>
                        <h5 class="text-danger mb-1">خطا</h5>
                        <p class="text-muted mb-3">اتوماسیون با مشکل مواجه شده</p>
                    @endif

                    <div class="border rounded p-3 bg-light mb-3">
                        <div class="row g-2 text-center">
                            <div class="col-6">
                                <h4 class="text-primary mb-0">{{ $automation->total_runs }}</h4>
                                <small class="text-muted">کل اجراها</small>
                            </div>
                            <div class="col-6">
                                <h4 class="text-success mb-0">{{ $automation->success }}</h4>
                                <small class="text-muted">موفق</small>
                            </div>
                        </div>
                    </div>

                    <div class="d-grid gap-2">

                        <button class="btn btn-outline-danger btn-delete">
                            <i class="ri-delete-bin-line align-bottom me-1"></i>حذف اتوماسیون
                        </button>
                    </div>
                </div>
            </div>

            <!-- Quick Actions Card -->
            <div class="card mt-4">
                <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="d-grid gap-2">
                        <button class="btn btn-success btn-toggle-status" data-id="{{ $automation->id }}">
                            <i class="ri-toggle-line align-bottom me-1"></i>تغییر وضعیت
                        </button>
                        <a href="{{ route('admin.automations.logs', ['automation'=>$automation->id]) }}" class="btn btn-info btn-view-logs">
                            <i class="ri-file-list-line align-bottom me-1"></i>مشاهده لاگ‌ها
                        </a>
                    </div>
                </div>
            </div>

            <!-- Statistics Card -->
            <div class="card mt-4">
                <div class="card-header border-bottom py-3">
                    <h5 class="card-title mb-0">
                        <i class="ri-bar-chart-line align-bottom me-2"></i>آمار
                    </h5>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <div class="mb-3">
                            <h2 class="text-primary mb-0">{{ $automation->success }}</h2>
                            <small class="text-muted">اجرای موفق</small>
                        </div>
                        <div class="progress mb-2" style="height: 6px;">
                            <div class="progress-bar bg-success" style="width: {{ ($automation->success / max($automation->total_runs, 1)) * 100 }}%"></div>
                        </div>
                        <small class="text-muted">نرخ موفقیت: {{ $automation->total_runs > 0 ? round(($automation->success / $automation->total_runs) * 100, 1) : 0 }}%</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Manual Run Button
            document.querySelectorAll('.btn-run-manual').forEach(btn=>{
                btn.addEventListener('click', () => {
                    const originalText = btn.innerHTML;
                    btn.disabled = true;
                    btn.innerHTML = '<i class="ri-loader-4-line align-bottom me-1 animate-spin"></i>در حال اجرا...';

                    setTimeout(()=> {
                        btn.innerHTML = originalText;
                        btn.disabled = false;

                        // Show success message
                        const toast = `<div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="ri-check-line me-2"></i>اتوماسیون با موفقیت اجرا شد
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>`;
                        document.body.insertAdjacentHTML('afterbegin', toast);
                    }, 2000);
                });
            });

            // Toggle Status Button
            document.querySelectorAll('.btn-toggle-status').forEach(btn=>{
                btn.addEventListener('click', () => {
                    const confirmToggle = confirm('آیا می‌خواهید وضعیت این اتوماسیون را تغییر دهید؟');
                    if (!confirmToggle) return;

                    // Simulate API call
                    btn.disabled = true;
                    setTimeout(() => {
                        btn.disabled = false;
                        alert('وضعیت اتوماسیون تغییر کرد (در نسخه واقعی با ajax به سرور ارسال می‌شود).');
                    }, 500);
                });
            });

            // Delete Button
            document.querySelectorAll('.btn-delete').forEach(btn=>{
                btn.addEventListener('click', () => {
                    const confirmDelete = confirm('آیا از حذف این اتوماسیون اطمینان دارید؟ این عمل غیرقابل بازگشت است.');
                    if (confirmDelete) {
                        alert('اتوماسیون حذف شد (در نسخه واقعی با ajax به سرور ارسال می‌شود).');
                    }
                });
            });
        });
    </script>

    <style>
        .animate-spin {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
@endsection