@extends('admin.layouts.master')

@section('css')
    <style>
        .stats-card {
            border-radius: 15px;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .stats-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .tool-card {
            border-radius: 10px;
            transition: all 0.2s;
        }

        .tool-card:hover {
            border-color: #007bff !important;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }
    </style>
@endsection

@include('admin.helper.tittle', ['title' => 'توليد التقارير'])

@section('content')
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card bg-warning text-dark">
                <div class="card-body py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-1">
                                <x-lucide-file-text width="20" height="20" class="me-2" />
                                توليد التقارير
                            </h4>
                            <p class="mb-0 opacity-75">إنشاء تقارير الأوردرات المُجمّعة</p>
                        </div>
                        <a href="{{ route('admin.developer.index') }}" class="btn btn-dark">
                            <x-lucide-arrow-right width="20" height="20" class="me-1" /> رجوع
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card stats-card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0 opacity-75">إجمالي الأوردرات</h6>
                            <h3 class="mb-0">{{ number_format($stats['total_orders']) }}</h3>
                        </div>
                        <x-lucide-shopping-cart width="32" height="32" class="opacity-50" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stats-card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0 opacity-75">التقارير المُنشأة</h6>
                            <h3 class="mb-0">{{ number_format($stats['reported_orders']) }}</h3>
                        </div>
                        <x-lucide-file-text width="32" height="32" class="opacity-50" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stats-card bg-warning text-dark">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0 opacity-75">نسبة التغطية</h6>
                            <h3 class="mb-0">{{ $stats['coverage_percent'] }}%</h3>
                        </div>
                        <x-lucide-pie-chart width="32" height="32" class="opacity-50" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stats-card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0 opacity-75">التقارير المعلقة</h6>
                            <h3 class="mb-0">{{ number_format($stats['pending_reports']) }}</h3>
                        </div>
                        <x-lucide-clock width="32" height="32" class="opacity-50" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Report Generation Tools -->
    <div class="row">
        <div class="col-md-4 mb-4">
            <div class="card tool-card h-100">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0"><x-lucide-flame width="20" height="20" class="me-2" />البيانات الساخنة</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted">توليد تقارير آخر {{ $stats['hot_data_days'] }} أيام</p>
                    <p class="small text-muted mb-3">
                        <x-lucide-info width="20" height="20" class="me-1" />
                        البيانات الساخنة: {{ number_format($stats['hot_orders']) }} أوردر
                    </p>
                    <button class="btn btn-danger w-100" id="btnGenerateHot">
                        <x-lucide-zap width="20" height="20" class="me-1" /> توليد البيانات الساخنة
                    </button>
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-4">
            <div class="card tool-card h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><x-lucide-calendar width="20" height="20" class="me-2" />يوم محدد</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted">توليد تقارير يوم معين</p>
                    <div class="mb-3">
                        <label class="form-label small">اختر التاريخ:</label>
                        <input type="date" id="specificDate" class="form-control" min="{{ $stats['min_date'] }}"
                            max="{{ date('Y-m-d') }}" value="{{ date('Y-m-d', strtotime('-1 day')) }}">
                    </div>
                    <button class="btn btn-primary w-100" id="btnGenerateDate">
                        <x-lucide-calendar-check width="20" height="20" class="me-1" /> توليد لهذا اليوم
                    </button>
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-4">
            <div class="card tool-card h-100">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><x-lucide-refresh-cw width="20" height="20" class="me-2" />جميع التقارير</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted">توليد جميع التقارير المعلقة</p>
                    <p class="small text-muted mb-3">
                        <x-lucide-alert-triangle width="20" height="20" class="me-1 text-warning" />
                        {{ number_format($stats['pending_reports']) }} تقرير معلق - قد يستغرق وقتاً
                    </p>
                    <button class="btn btn-success w-100" id="btnGenerateAll">
                        <x-lucide-settings width="20" height="20" class="me-1" /> توليد الكل
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Additional Info -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><x-lucide-info width="20" height="20" class="me-2" />معلومات إضافية</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-sm">
                                <tr>
                                    <th>تاريخ بداية التقارير:</th>
                                    <td>{{ $stats['min_date'] }}</td>
                                </tr>
                                <tr>
                                    <th>أقدم تاريخ أوردر:</th>
                                    <td>{{ $stats['oldest_order_date'] ?? 'غير متوفر' }}</td>
                                </tr>
                                <tr>
                                    <th>أقدم تاريخ تقرير:</th>
                                    <td>{{ $stats['oldest_report_date'] ?? 'لا يوجد تقارير' }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-sm">
                                <tr>
                                    <th>آخر تقرير:</th>
                                    <td>{{ $stats['last_report_date'] ?? 'لا يوجد' }}</td>
                                </tr>
                                <tr>
                                    <th>عدد أيام البيانات الساخنة:</th>
                                    <td>{{ $stats['hot_data_days'] }} أيام</td>
                                </tr>
                                <tr>
                                    <th>البيانات الساخنة:</th>
                                    <td>{{ number_format($stats['hot_orders']) }} أوردر</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Export Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0"><x-lucide-download width="20" height="20" class="me-2" />تصدير التقارير</h5>
                </div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <p class="mb-0">تصدير جميع التقارير المُنشأة إلى ملف Excel</p>
                        </div>
                        <div class="col-md-4 text-end">
                            <a href="{{ route('admin.developer.export-reports') }}" class="btn btn-secondary">
                                <x-lucide-file-spreadsheet width="20" height="20" class="me-1" /> تصدير Excel
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Clear Reports Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card border-danger">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0"><x-lucide-trash-2 width="20" height="20" class="me-2" />حذف التقارير</h5>
                </div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <p class="mb-0 text-danger">
                                <x-lucide-alert-triangle width="20" height="20" class="me-1" />
                                تحذير: سيتم حذف جميع التقارير المُنشأة. هذا الإجراء لا يمكن التراجع عنه.
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <button class="btn btn-outline-danger" id="btnClearReports">
                                <x-lucide-trash-2 width="20" height="20" class="me-1" /> حذف كل التقارير
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('btnGenerateHot')?.addEventListener('click', async function() {
                if (!confirm('هل تريد توليد تقارير البيانات الساخنة؟')) return;

                this.disabled = true;
                this.innerHTML = `{!! svg("lucide-loader-2", ["class" => "animate-spin", "width" => 20, "height" => 20])->toHtml() !!} جاري التوليد...`;

                try {
                    const response = await fetch(
                        '{{ route('admin.developer.generate-hot-reports') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json'
                            },
                            body: JSON.stringify({
                                sync: false
                            })
                        });
                    const data = await response.json();
                    if (data.success) {
                        toastr.success('تم إرسال الطلب للتوليد في الخلفية');
                    } else {
                        toastr.error(data.message);
                    }
                } catch (error) {
                    toastr.error('حدث خطأ غير متوقع');
                }

                this.disabled = false;
                this.innerHTML = `{!! svg("lucide-zap", ["width" => 20, "height" => 20])->toHtml() !!} توليد البيانات الساخنة`;
            });

            document.getElementById('btnGenerateDate')?.addEventListener('click', async function() {
                const date = document.getElementById('specificDate').value;
                if (!date) {
                    toastr.warning('اختر تاريخاً أولاً');
                    return;
                }

                this.disabled = true;
                this.innerHTML = `{!! svg("lucide-loader-2", ["class" => "animate-spin", "width" => 20, "height" => 20])->toHtml() !!} جاري التوليد...`;

                try {
                    const response = await fetch('{{ route('admin.developer.generate-for-date') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            date: date,
                            sync: false
                        })
                    });
                    const data = await response.json();
                    if (data.success) {
                        toastr.success('تم إرسال الطلب للتوليد في الخلفية');
                    } else {
                        toastr.error(data.message);
                    }
                } catch (error) {
                    toastr.error('حدث خطأ غير متوقع');
                }

                this.disabled = false;
                this.innerHTML = `{!! svg("lucide-calendar-check", ["width" => 20, "height" => 20])->toHtml() !!} توليد لهذا اليوم`;
            });

            document.getElementById('btnGenerateAll')?.addEventListener('click', async function() {
                if (!confirm('هل تريد توليد جميع التقارير المعلقة؟ قد يستغرق هذا وقتاً.')) return;

                this.disabled = true;
                this.innerHTML = `{!! svg("lucide-loader-2", ["class" => "animate-spin", "width" => 20, "height" => 20])->toHtml() !!} جاري التوليد...`;

                try {
                    const response = await fetch(
                        '{{ route('admin.developer.generate-all-reports') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json'
                            },
                            body: JSON.stringify({
                                sync: false
                            })
                        });
                    const data = await response.json();
                    if (data.success) {
                        toastr.success(data.message);
                    } else {
                        toastr.error(data.message);
                    }
                } catch (error) {
                    toastr.error('حدث خطأ غير متوقع');
                }

                this.disabled = false;
                this.innerHTML = `{!! svg("lucide-settings", ["width" => 20, "height" => 20])->toHtml() !!} توليد الكل`;
            });

            document.getElementById('btnClearReports')?.addEventListener('click', async function() {
                if (!confirm('هل أنت متأكد من حذف جميع التقارير؟ لا يمكن التراجع عن هذا الإجراء!'))
                    return;
                if (!confirm('تأكيد نهائي: سيتم حذف كل التقارير. هل تريد المتابعة؟')) return;

                this.disabled = true;
                this.innerHTML = `{!! svg("lucide-loader-2", ["class" => "animate-spin", "width" => 20, "height" => 20])->toHtml() !!} جاري الحذف...`;

                try {
                    const response = await fetch('{{ route('admin.developer.clear-reports') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        }
                    });
                    const data = await response.json();
                    if (data.success) {
                        toastr.success(data.message);
                        location.reload();
                    } else {
                        toastr.error(data.message);
                    }
                } catch (error) {
                    toastr.error('حدث خطأ غير متوقع');
                }

                this.disabled = false;
                this.innerHTML = `{!! svg("lucide-trash-2", ["width" => 20, "height" => 20])->toHtml() !!} حذف كل التقارير`;
            });
        });
    </script>
@endsection