@extends('admin.layouts.master')
@section('title', 'كفاءة الماكينات OEE')

@push('styles')
<style>
.oee-cell { font-weight:bold; padding:6px 12px; border-radius:6px; display:inline-block; font-size:1.1rem; }
.oee-excellent { background:#d1f7c4; color:#15803d; }
.oee-good { background:#fef3c7; color:#a16207; }
.oee-poor { background:#fee2e2; color:#b91c1c; }
.progress-mini { height:8px; }
.benchmark-card { background:linear-gradient(135deg, #f8f9fa, #fff); border-left:4px solid; padding:14px; border-radius:8px; }
</style>
@endpush

@section('page-header')
@include('admin.reports._header', [
    'title' => 'كفاءة الماكينات (OEE)',
    'subtitle' => 'مؤشر الكفاءة الكلية - المعيار العالمي لقياس أداء المعدات',
    'icon' => 'ti-gauge',
    'color' => 'purple',
])
@endsection

@section('content')
@include('admin.reports._filters', ['from'=>$from, 'to'=>$to, 'showCompare'=>false])

{{-- شرح OEE --}}
<div class="alert alert-info mb-3 no-print">
    <div class="row align-items-center">
        <div class="col-md-8">
            <h4 class="m-0"><i class="ti ti-info-circle ms-1"></i> ما هو OEE؟</h4>
            <p class="m-0 small">
                <strong>Overall Equipment Effectiveness</strong> هو المعيار العالمي لقياس كفاءة الماكينات في المصانع. يجمع 3 عوامل:
                <strong>التوافر</strong> (Availability) × <strong>الأداء</strong> (Performance) × <strong>الجودة</strong> (Quality)
            </p>
        </div>
        <div class="col-md-4">
            <div class="benchmark-card" style="border-color:#198754">
                <small><strong class="text-success">85%+ ممتاز (World-class)</strong></small><br>
                <small><strong class="text-warning">60%-85% جيد</strong></small><br>
                <small><strong class="text-danger">أقل من 60% يحتاج تحسين</strong></small>
            </div>
        </div>
    </div>
</div>

@php
    $insights = [];
    if ($avgOEE < 60) $insights[] = ['type'=>'negative', 'text'=>"المتوسط العام للكفاءة <strong>".round($avgOEE,1)."%</strong> منخفض - فيه مشاكل تشغيلية"];
    elseif ($avgOEE >= 85) $insights[] = ['type'=>'positive', 'text'=>"المتوسط العام <strong>".round($avgOEE,1)."%</strong> ممتاز - أداء على المستوى العالمي"];
    else $insights[] = ['type'=>'warning', 'text'=>"المتوسط العام <strong>".round($avgOEE,1)."%</strong> جيد - فرصة للتحسين"];
    if ($avgAvail < 70) $insights[] = ['type'=>'warning', 'text'=>"معدل التوافر منخفض (<strong>".round($avgAvail,1)."%</strong>) - فيه وقت توقف كثير"];
    if ($avgQual < 90) $insights[] = ['type'=>'negative', 'text'=>"معدل الجودة <strong>".round($avgQual,1)."%</strong> - راجع تقرير تحليل الفاقد"];
@endphp

@if(!empty($insights))
<div class="insights-box">
    <h4 class="mb-2"><i class="ti ti-bulb ms-1 text-warning"></i> الرؤى التحليلية</h4>
    @foreach($insights as $insight)
    <div class="insight-item {{ $insight['type'] }}">
        <i class="ti ti-{{ $insight['type'] === 'positive' ? 'circle-check' : ($insight['type'] === 'negative' ? 'alert-triangle' : 'info-circle') }} ms-1"></i>
        <div>{!! $insight['text'] !!}</div>
    </div>
    @endforeach
</div>
@endif

<div class="row row-cards mb-3">
    <div class="col-md-3">
        <div class="kpi-pro featured" style="border-color:{{ $avgOEE >= 85 ? '#198754' : ($avgOEE >= 60 ? '#ffc107' : '#dc3545') }}">
            <i class="ti ti-gauge kpi-icon-bg"></i>
            <div class="kpi-label">المتوسط الكلي OEE</div>
            <div class="kpi-value {{ $avgOEE >= 85 ? 'text-success' : ($avgOEE >= 60 ? 'text-warning' : 'text-danger') }}">{{ round($avgOEE, 1) }}<span class="kpi-unit">%</span></div>
            <div class="kpi-trend flat"><i class="ti ti-target"></i> الهدف 85%+</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="kpi-pro featured" style="border-color:#0d6efd">
            <i class="ti ti-clock kpi-icon-bg text-primary"></i>
            <div class="kpi-label">التوافر</div>
            <div class="kpi-value text-primary">{{ round($avgAvail, 1) }}<span class="kpi-unit">%</span></div>
            <div class="kpi-trend flat"><i class="ti ti-info-circle"></i> وقت التشغيل / الوقت المخطط</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="kpi-pro featured" style="border-color:#0dcaf0">
            <i class="ti ti-trending-up kpi-icon-bg text-info"></i>
            <div class="kpi-label">الأداء</div>
            <div class="kpi-value text-info">{{ round($avgPerf, 1) }}<span class="kpi-unit">%</span></div>
            <div class="kpi-trend flat"><i class="ti ti-info-circle"></i> سرعة الإنتاج الفعلية</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="kpi-pro featured" style="border-color:#198754">
            <i class="ti ti-shield-check kpi-icon-bg text-success"></i>
            <div class="kpi-label">الجودة</div>
            <div class="kpi-value text-success">{{ round($avgQual, 1) }}<span class="kpi-unit">%</span></div>
            <div class="kpi-trend flat"><i class="ti ti-info-circle"></i> الإنتاج المطابق</div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header"><h3 class="card-title">تفاصيل الكفاءة لكل ماكينة (مرتبة من الأفضل)</h3></div>
    <div class="table-responsive">
        <table class="table card-table table-vcenter">
            <thead><tr>
                <th>الماكينة</th><th>النوع</th>
                <th class="text-center">التوافر</th><th class="text-center">الأداء</th><th class="text-center">الجودة</th>
                <th class="text-center" style="min-width:90px">OEE</th>
                <th class="text-center">ساعات</th><th class="text-center">إنتاج</th><th class="text-center">فاقد</th>
            </tr></thead>
            <tbody>
                @forelse($oeeData as $row)
                <tr>
                    <td><strong>{{ $row['machine']->name }}</strong><br><small class="text-muted">{{ $row['machine']->code }}</small></td>
                    <td>{{ $row['machine']->machineType?->name ?? '-' }}</td>
                    <td class="text-center" style="width:120px"><strong>{{ $row['availability'] }}%</strong><div class="progress progress-mini"><div class="progress-bar bg-primary" style="width:{{ $row['availability'] }}%"></div></div></td>
                    <td class="text-center" style="width:120px"><strong>{{ $row['performance'] }}%</strong><div class="progress progress-mini"><div class="progress-bar bg-info" style="width:{{ $row['performance'] }}%"></div></div></td>
                    <td class="text-center" style="width:120px"><strong>{{ $row['quality'] }}%</strong><div class="progress progress-mini"><div class="progress-bar bg-success" style="width:{{ $row['quality'] }}%"></div></div></td>
                    <td class="text-center">
                        @php $cls = $row['oee'] >= 85 ? 'oee-excellent' : ($row['oee'] >= 60 ? 'oee-good' : 'oee-poor'); @endphp
                        <span class="oee-cell {{ $cls }}">{{ $row['oee'] }}%</span>
                    </td>
                    <td class="text-center">{{ $row['actual_hours'] }}</td>
                    <td class="text-center text-success">{{ number_format($row['output']) }}</td>
                    <td class="text-center text-danger">{{ number_format($row['waste']) }}</td>
                </tr>
                @empty
                <tr><td colspan="9" class="text-center text-muted py-4">لا توجد بيانات</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="card no-print">
    <div class="card-header"><h3 class="card-title">رسم بياني للمقارنة</h3></div>
    <div class="card-body"><div id="oeeChart"></div></div>
</div>

<div class="print-footer print-only">
    تقرير OEE | {{ \App\Models\Setting::get('company_name') }} | {{ now()->format('Y-m-d H:i') }} | الفترة: {{ $from }} - {{ $to }}
</div>
@endsection

@push('scripts')
<script>
const oeeData = @json($oeeData->values());
new ApexCharts(document.querySelector('#oeeChart'), {
    chart: { type: 'bar', height: 400, fontFamily: 'Cairo' },
    series: [
        { name: 'التوافر %', data: oeeData.map(d => d.availability) },
        { name: 'الأداء %',  data: oeeData.map(d => d.performance) },
        { name: 'الجودة %',  data: oeeData.map(d => d.quality) },
        { name: 'OEE %',     data: oeeData.map(d => d.oee) },
    ],
    xaxis: { categories: oeeData.map(d => d.machine.name) },
    colors: ['#0d6efd', '#0dcaf0', '#198754', '#dc3545'],
    plotOptions: { bar: { columnWidth: '70%', borderRadius: 4 } },
    legend: { position: 'top', fontFamily: 'Cairo' },
    dataLabels: { enabled: false },
}).render();
</script>
@endpush