@extends('layouts.app')
@section('title', 'Manufacturing Dashboard')

@section('content')
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        <i class="bi bi-speedometer2"></i> Manufacturing Dashboard
    </h1>
</section>

<section class="content">
    <div class="container-fluid">
        <!-- Stats Cards -->
        <div class="row">
            <div class="col-lg-3 col-6">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3>{{ $data['production']['today']['orders_completed'] ?? 0 }}</h3>
                        <p>Orders Completed Today</p>
                    </div>
                    <div class="icon">
                        <i class="bi bi-check-circle"></i>
                    </div>
                    <a href="{{ route('manufacturing.production.orders.index') }}" class="small-box-footer">
                        More info <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            
            <div class="col-lg-3 col-6">
                <div class="small-box bg-success">
                    <div class="inner">
                        <h3>{{ $data['inventory']['raw_materials']['total_items'] ?? 0 }}</h3>
                        <p>Raw Materials</p>
                    </div>
                    <div class="icon">
                        <i class="bi bi-boxes"></i>
                    </div>
                    <a href="{{ route('manufacturing.inventory.raw.index') }}" class="small-box-footer">
                        More info <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            
            <div class="col-lg-3 col-6">
                <div class="small-box bg-warning">
                    <div class="inner">
                        <h3>{{ $data['quality']['overall']['pending'] ?? 0 }}</h3>
                        <p>Pending QC Inspections</p>
                    </div>
                    <div class="icon">
                        <i class="bi bi-clipboard-check"></i>
                    </div>
                    <a href="{{ route('manufacturing.quality.inspections.index') }}" class="small-box-footer">
                        More info <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
            
            <div class="col-lg-3 col-6">
                <div class="small-box bg-danger">
                    <div class="inner">
                        <h3>{{ $data['maintenance']['breakdown'] ?? 0 }}</h3>
                        <p>Machines in Breakdown</p>
                    </div>
                    <div class="icon">
                        <i class="bi bi-tools"></i>
                    </div>
                    <a href="{{ route('manufacturing.maintenance.machines.index') }}" class="small-box-footer">
                        More info <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Charts Row -->
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Production Trend (Last 30 Days)</h3>
                    </div>
                    <div class="card-body">
                        <canvas id="productionTrendChart"></canvas>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Quality Pass Rate</h3>
                    </div>
                    <div class="card-body">
                        <canvas id="qualityChart"></canvas>
                        <div class="text-center mt-3">
                            <span class="badge bg-success">Passed: {{ $data['quality']['today']['passed'] ?? 0 }}</span>
                            <span class="badge bg-danger">Failed: {{ $data['quality']['today']['failed'] ?? 0 }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Low Stock Alerts -->
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-danger text-white">
                        <h3 class="card-title"><i class="bi bi-exclamation-triangle"></i> Low Stock Alerts</h3>
                    </div>
                    <div class="card-body">
                        @if(isset($data['low_stock_alert']))
                            <div class="row">
                                @if(!empty($data['low_stock_alert']['raw_materials']))
                                <div class="col-md-6">
                                    <h5>Raw Materials</h5>
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Material</th>
                                                    <th>Current Stock</th>
                                                    <th>Reorder Point</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($data['low_stock_alert']['raw_materials'] as $item)
                                                <tr>
                                                    <td>{{ $item['name'] }}</td>
                                                    <td class="text-danger">{{ $item['current_stock'] }} {{ $item['unit'] }}</td>
                                                    <td>{{ $item['reorder_point'] }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                @endif
                                
                                @if(!empty($data['low_stock_alert']['finished_products']))
                                <div class="col-md-6">
                                    <h5>Finished Products</h5>
                                    <div class="table-responsive">
                                        <table class="table table-sm">
                                            <thead>
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Current Stock</th>
                                                    <th>Reorder Point</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($data['low_stock_alert']['finished_products'] as $item)
                                                <tr>
                                                    <td>{{ $item['name'] }}</td>
                                                    <td class="text-danger">{{ $item['current_stock'] }} {{ $item['unit'] }}</td>
                                                    <td>{{ $item['reorder_point'] }}</td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Recent Orders -->
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Recent Production Orders</h3>
                    </div>
                    <div class="card-body table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Order #</th>
                                    <th>Product</th>
                                    <th>Quantity</th>
                                    <th>Status</th>
                                    <th>Progress</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($data['recent_orders'] ?? [] as $order)
                                <tr>
                                    <td>{{ $order['order_number'] }}</td>
                                    <td>{{ $order['product'] }}</td>
                                    <td>{{ number_format($order['quantity']) }}</td>
                                    <td>@include('manufacturing.partials.status-badge', ['status' => $order['status']])</td>
                                    <td>
                                        <div class="progress">
                                            <div class="progress-bar" role="progressbar" style="width: {{ $order['progress'] }}%">
                                                {{ round($order['progress']) }}%
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <a href="{{ route('manufacturing.production.orders.show', $order['id'] ?? 0) }}" class="btn btn-sm btn-info">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center">No recent orders</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
<style>
.small-box {
    border-radius: 10px;
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
    position: relative;
    display: block;
    margin-bottom: 20px;
}
.small-box .inner {
    padding: 10px;
}
.small-box .icon {
    position: absolute;
    right: 10px;
    top: 10px;
    color: rgba(0,0,0,0.15);
    font-size: 70px;
}
.small-box .small-box-footer {
    display: block;
    padding: 3px 0;
    color: #fff;
    text-align: center;
    text-decoration: none;
    z-index: 10;
    position: relative;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Production Trend Chart
    const ctx1 = document.getElementById('productionTrendChart')?.getContext('2d');
    if (ctx1) {
        const trendData = @json($data['production_trend'] ?? []);
        new Chart(ctx1, {
            type: 'line',
            data: {
                labels: trendData.map(d => d.date),
                datasets: [
                    {
                        label: 'Target',
                        data: trendData.map(d => d.target),
                        borderColor: 'blue',
                        fill: false
                    },
                    {
                        label: 'Actual',
                        data: trendData.map(d => d.actual),
                        borderColor: 'green',
                        fill: false
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top'
                    }
                }
            }
        });
    }
    
    // Quality Chart
    const ctx2 = document.getElementById('qualityChart')?.getContext('2d');
    if (ctx2) {
        new Chart(ctx2, {
            type: 'doughnut',
            data: {
                labels: ['Passed', 'Failed', 'Use As Is'],
                datasets: [{
                    data: [
                        {{ $data['quality']['today']['passed'] ?? 0 }},
                        {{ $data['quality']['today']['failed'] ?? 0 }},
                        {{ $data['quality']['today']['use_as_is'] ?? 0 }}
                    ],
                    backgroundColor: ['#28a745', '#dc3545', '#ffc107']
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }
</script>
@endpush
@endsection