@extends('layouts.app')
@section('title', 'Shipment Predictions')
@section('breadcrumbs')
<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li><li class="breadcrumb-item"><a href="#">AI Platform</a></li><li class="breadcrumb-item active">Predictions</li></ol></nav>
@endsection
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div><h1 class="h3 mb-1 text-dark fw-semibold">Shipment Predictions</h1><p class="text-muted mb-0">AI-powered ETA predictions and accuracy tracking</p></div>
</div>
<div class="row g-3 mb-4">
    @php $stats = [['label'=>'Prediction Accuracy','count'=>($stats['accuracy']??92).'%','icon'=>'bi-bullseye','color'=>'success'],['label'=>'Total Predictions','count'=>$stats['total']??0,'icon'=>'bi-graph-up','color'=>'primary'],['label'=>'Early Arrivals','count'=>$stats['early']??0,'icon'=>'bi-arrow-up-circle','color'=>'info'],['label'=>'Delayed','count'=>$stats['delayed']??0,'icon'=>'bi-clock-history','color'=>'warning']]; @endphp
    @foreach($stats as $stat)<div class="col"><x-kpi-card :title="$stat['label']" :value="$stat['count']" :icon="$stat['icon']" :color="$stat['color']" /></div>@endforeach
</div>
<div class="row g-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white py-3"><h5 class="mb-0 fw-semibold">ETA Accuracy Over Time</h5></div>
            <div class="card-body"><div style="height:300px;"><canvas id="accuracyChart"></canvas></div></div>
        </div>
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3"><h5 class="mb-0 fw-semibold">Recent Predictions</h5></div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light"><tr><th class="px-3 small fw-semibold text-muted">Shipment</th><th class="px-3 small fw-semibold text-muted">Route</th><th class="px-3 small fw-semibold text-muted">Predicted ETA</th><th class="px-3 small fw-semibold text-muted">Actual ETA</th><th class="px-3 small fw-semibold text-muted">Deviation</th><th class="px-3 small fw-semibold text-muted">Accuracy</th></tr></thead>
                        <tbody>
                            @forelse($predictions ?? [] as $p)
                            <tr>
                                <td class="px-3 fw-medium">{{ $p->shipment_number ?? 'N/A' }}</td>
                                <td class="px-3">{{ $p->origin ?? '' }} → {{ $p->destination ?? '' }}</td>
                                <td class="px-3">{{ optional($p->predicted_eta)->format('d M Y') ?? 'N/A' }}</td>
                                <td class="px-3">{{ optional($p->actual_eta)->format('d M Y') ?? 'Pending' }}</td>
                                <td class="px-3"><span class="badge bg-{{ abs($p->deviation_days ?? 0) <= 1 ? 'success' : (abs($p->deviation_days ?? 0) <= 3 ? 'warning' : 'danger') }}-subtle text-{{ abs($p->deviation_days ?? 0) <= 1 ? 'success' : (abs($p->deviation_days ?? 0) <= 3 ? 'warning' : 'danger') }}">{{ ($p->deviation_days ?? 0) > 0 ? '+' : '' }}{{ $p->deviation_days ?? 0 }} days</span></td>
                                <td class="px-3"><span class="fw-medium">{{ number_format($p->accuracy ?? 0, 1) }}%</span></td>
                            </tr>
                            @empty
                            <tr><td colspan="6" class="text-center py-4 text-muted">No predictions yet</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3"><h5 class="mb-0 fw-semibold">Prediction Factors</h5></div>
            <div class="card-body">
                @foreach(['Weather' => 85, 'Port Congestion' => 72, 'Route History' => 90, 'Carrier Performance' => 78, 'Customs Processing' => 65] as $factor => $weight)
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-1"><span class="small fw-medium">{{ $factor }}</span><span class="small text-muted">{{ $weight }}%</span></div>
                    <div class="progress" style="height:6px;"><div class="progress-bar bg-{{ $weight > 80 ? 'success' : ($weight > 60 ? 'info' : 'warning') }}" style="width:{{ $weight }}%"></div></div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>$(document).ready(function(){ var ctx=document.getElementById('accuracyChart'); if(ctx){ new Chart(ctx,{type:'line',data:{labels:['Jan','Feb','Mar','Apr','May','Jun'],datasets:[{label:'Accuracy %',data:[88,91,89,93,92,95],borderColor:'#0d6efd',backgroundColor:'rgba(13,110,253,0.1)',fill:true,tension:0.4}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{y:{min:80,max:100}}}}); } });</script>
@endpush