@extends('admin.layouts.master')
@section('title', 'مركز التقارير')

@push('styles')
<style>
.report-card {
    border:1px solid #e9ecef;
    border-radius:12px;
    padding:20px;
    height:100%;
    text-decoration:none;
    color:inherit;
    transition: all .25s;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.report-card:hover {
    border-color: #0d6efd;
    box-shadow: 0 8px 24px rgba(13,110,253,0.12);
    transform: translateY(-3px);
    color: inherit;
}
.report-card .icon-bg {
    width:64px; height:64px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:32px; color:#fff; margin-bottom:14px;
}
.report-card h4 { margin:0 0 6px; font-weight:bold; }
.report-card .badge-corner {
    position:absolute; top:12px; left:12px;
}
.section-header {
    border-bottom:3px solid #0d6efd;
    padding-bottom:10px; margin: 24px 0 18px;
    display:flex; align-items:center; gap:10px;
}
.section-header .section-icon {
    width:44px; height:44px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; color:#fff;
}
.stat-mini { text-align:center; padding:8px 4px; }
.stat-mini .stat-value { font-size:1.4rem; font-weight:bold; }
.stat-mini .stat-label { font-size:0.75rem; color:#6c757d; }
</style>
@endpush

@section('page-header')
<div class="row align-items-center">
    <div class="col">
        <div class="page-pretitle">مركز التقارير والتحليلات</div>
        <h2 class="page-title"><i class="ti ti-chart-dots-3 ms-1"></i> مركز التقارير</h2>
    </div>
    <div class="col-auto">
        <span class="badge bg-primary fs-3 px-3 py-2"><i class="ti ti-calendar ms-1"></i> {{ now()->translatedFormat('j F Y') }}</span>
    </div>
</div>
@endsection

@section('content')

{{-- Quick Stats Overview --}}
<div class="card mb-3">
    <div class="card-body">
        <div class="row g-2">
            <div class="col-6 col-md-3 col-lg-2 stat-mini">
                <i class="ti ti-cash text-success" style="font-size:28px"></i>
                <div class="stat-value text-success">{{ number_format($stats['sales_month'], 0) }}</div>
                <div class="stat-label">مبيعات الشهر (ج)</div>
            </div>
            <div class="col-6 col-md-3 col-lg-2 stat-mini">
                <i class="ti ti-package text-primary" style="font-size:28px"></i>
                <div class="stat-value">{{ number_format($stats['orders_month']) }}</div>
                <div class="stat-label">طلبات الشهر</div>
            </div>
            <div class="col-6 col-md-3 col-lg-2 stat-mini">
                <i class="ti ti-trending-up text-info" style="font-size:28px"></i>
                <div class="stat-value @if($stats['profit_month'] >= 0) text-success @else text-danger @endif">{{ number_format($stats['profit_month'], 0) }}</div>
                <div class="stat-label">صافي الربح (ج)</div>
            </div>
            <div class="col-6 col-md-3 col-lg-2 stat-mini">
                <i class="ti ti-cpu text-warning" style="font-size:28px"></i>
                <div class="stat-value">{{ $stats['machines_active'] }}/{{ $stats['machines_total'] }}</div>
                <div class="stat-label">ماكينات تعمل</div>
            </div>
            <div class="col-6 col-md-3 col-lg-2 stat-mini">
                <i class="ti ti-percentage text-danger" style="font-size:28px"></i>
                <div class="stat-value text-danger">{{ $stats['waste_rate'] }}%</div>
                <div class="stat-label">نسبة الفاقد</div>
            </div>
            <div class="col-6 col-md-3 col-lg-2 stat-mini">
                <i class="ti ti-shield-check text-success" style="font-size:28px"></i>
                <div class="stat-value text-success">{{ $stats['quality_rate'] }}%</div>
                <div class="stat-label">معدل الجودة</div>
            </div>
        </div>
    </div>
</div>

{{-- ╔═══ التقارير المالية ═══╗ --}}
<div class="section-header">
    <div class="section-icon" style="background:#0d6efd"><i class="ti ti-coins"></i></div>
    <div>
        <h3 class="m-0">التقارير المالية</h3>
        <small class="text-muted">المبيعات والتحصيل والأرباح</small>
    </div>
</div>

<div class="row row-cards mb-2">
    <div class="col-md-6 col-lg-3">
        <a href="{{ route('admin.reports.sales') }}" class="report-card">
            <span class="badge badge-corner bg-primary-lt">يومي</span>
            <div class="icon-bg" style="background:linear-gradient(135deg,#0d6efd,#0a58ca)"><i class="ti ti-chart-bar"></i></div>
            <h4>تقرير المبيعات</h4>
            <p class="text-muted small mb-0">المبيعات اليومية، أعلى العملاء، إجمالي الفواتير والتحصيل</p>
        </a>
    </div>
    <div class="col-md-6 col-lg-3">
        <a href="{{ route('admin.reports.financial') }}" class="report-card">
            <span class="badge badge-corner bg-success-lt">شهري</span>
            <div class="icon-bg" style="background:linear-gradient(135deg,#198754,#157347)"><i class="ti ti-report-money"></i></div>
            <h4>التقرير المالي</h4>
            <p class="text-muted small mb-0">الإيرادات والتكاليف وصافي الربح وقائمة الدخل</p>
        </a>
    </div>
    <div class="col-md-6 col-lg-3">
        <a href="{{ route('admin.reports.sales-funnel') }}" class="report-card">
            <span class="badge badge-corner bg-info-lt">تحليلي</span>
            <div class="icon-bg" style="background:linear-gradient(135deg,#0dcaf0,#0aa2c0)"><i class="ti ti-filter"></i></div>
            <h4>قمع المبيعات</h4>
            <p class="text-muted small mb-0">رحلة العميل: عرض سعر → طلب → فاتورة → تحصيل</p>
        </a>
    </div>
    <div class="col-md-6 col-lg-3">
        <a href="{{ route('admin.reports.profit-by-type') }}" class="report-card">
            <span class="badge badge-corner bg-warning-lt">⭐ مميز</span>
            <div class="icon-bg" style="background:linear-gradient(135deg,#ffc107,#d39e00)"><i class="ti ti-chart-pie-2"></i></div>
            <h4>ربحية أنواع الطباعة</h4>
            <p class="text-muted small mb-0">أوفست vs ديجيتال vs فلكس vs تغليف - أيهم أكثر ربحاً؟</p>
        </a>
    </div>
</div>

{{-- ╔═══ تقارير الإنتاج والجودة ═══╗ --}}
<div class="section-header">
    <div class="section-icon" style="background:#fd7e14"><i class="ti ti-tool"></i></div>
    <div>
        <h3 class="m-0">تقارير الإنتاج والجودة</h3>
        <small class="text-muted">كفاءة الماكينات والإنتاجية</small>
    </div>
</div>

<div class="row row-cards mb-2">
    <div class="col-md-6 col-lg-3">
        <a href="{{ route('admin.reports.production') }}" class="report-card">
            <span class="badge badge-corner bg-primary-lt">يومي</span>
            <div class="icon-bg" style="background:linear-gradient(135deg,#fd7e14,#dc6502)"><i class="ti ti-chart-line"></i></div>
            <h4>تقرير الإنتاج</h4>
            <p class="text-muted small mb-0">الطلبات وبطاقات التشغيل وفحوصات الجودة والفاقد</p>
        </a>
    </div>
    <div class="col-md-6 col-lg-3">
        <a href="{{ route('admin.reports.machine-oee') }}" class="report-card">
            <span class="badge badge-corner bg-warning-lt">⭐ متخصص</span>
            <div class="icon-bg" style="background:linear-gradient(135deg,#6f42c1,#5a32a3)"><i class="ti ti-gauge"></i></div>
            <h4>كفاءة الماكينات (OEE)</h4>
            <p class="text-muted small mb-0">المعيار العالمي: التوافر × الأداء × الجودة لكل ماكينة</p>
        </a>
    </div>
    <div class="col-md-6 col-lg-3">
        <a href="{{ route('admin.reports.waste-analysis') }}" class="report-card">
            <span class="badge badge-corner bg-danger-lt">⭐ متخصص</span>
            <div class="icon-bg" style="background:linear-gradient(135deg,#dc3545,#b02a37)"><i class="ti ti-trash-x"></i></div>
            <h4>تحليل الفاقد</h4>
            <p class="text-muted small mb-0">أين ولماذا يحدث الفاقد؟ تحليل بالسبب والمرحلة والصنف</p>
        </a>
    </div>
    <div class="col-md-6 col-lg-3">
        <a href="{{ route('admin.reports.materials') }}" class="report-card">
            <span class="badge badge-corner bg-info-lt">⭐ متخصص</span>
            <div class="icon-bg" style="background:linear-gradient(135deg,#20c997,#198754)"><i class="ti ti-truck-loading"></i></div>
            <h4>استهلاك المواد الخام</h4>
            <p class="text-muted small mb-0">استهلاك الورق والزنكات والأحبار + معدل الاستخدام</p>
        </a>
    </div>
</div>

{{-- ╔═══ تقارير المخزون ═══╗ --}}
<div class="section-header">
    <div class="section-icon" style="background:#20c997"><i class="ti ti-building-warehouse"></i></div>
    <div>
        <h3 class="m-0">تقارير المخزون</h3>
        <small class="text-muted">قيمة المخزون والأصناف المنخفضة</small>
    </div>
</div>

<div class="row row-cards mb-2">
    <div class="col-md-6 col-lg-3">
        <a href="{{ route('admin.reports.inventory') }}" class="report-card">
            <span class="badge badge-corner bg-success-lt">شامل</span>
            <div class="icon-bg" style="background:linear-gradient(135deg,#20c997,#1aa179)"><i class="ti ti-chart-pie"></i></div>
            <h4>تقرير المخزون</h4>
            <p class="text-muted small mb-0">قيمة المخزون، الأصناف منخفضة، التوزيع بالفئات</p>
        </a>
    </div>
</div>

{{-- ╔═══ نصائح إدارية ═══╗ --}}
<div class="card mt-4 border-warning">
    <div class="card-body">
        <h4><i class="ti ti-bulb ms-1 text-warning"></i> نصائح المدير المحترف</h4>
        <div class="row">
            <div class="col-md-6">
                <ul class="small mb-0">
                    <li><strong>راجع OEE أسبوعياً</strong> — لمعرفة كفاءة كل ماكينة</li>
                    <li><strong>تحليل الفاقد يومياً</strong> — كل فرخ فاقد = خسارة مباشرة</li>
                    <li><strong>قمع المبيعات شهرياً</strong> — لمعرفة فرص التحسين</li>
                </ul>
            </div>
            <div class="col-md-6">
                <ul class="small mb-0">
                    <li><strong>ربحية الأنواع</strong> — ركز جهدك على الأنواع عالية الربحية</li>
                    <li><strong>استهلاك المواد</strong> — لتخطيط دقيق للمشتريات</li>
                    <li><strong>التقرير المالي</strong> — قبل وضع ميزانية الشهر القادم</li>
                </ul>
            </div>
        </div>
    </div>
</div>

@endsection