@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">
    
    <!-- Include Navigation -->
    @include('manufacturing.partials.navigation')
    
    <!-- Stats Cards -->
    <div class="row mt-4">
        <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" style="background: #ffffff;">
                <div class="card-header" style="background: #ffffff; border-bottom: 1px solid #dee2e6; padding: 12px 20px;">
                    <h3 class="card-title" style="font-size: 16px; font-weight: 600;">Production Trend (Last 30 Days)</h3>
                </div>
                <div class="card-body" style="background: #ffffff; padding: 15px 20px 20px 20px;">
                    <div style="position: relative; height: 250px;">
                        <canvas id="productionTrendChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card" style="background: #ffffff;">
                <div class="card-header" style="background: #ffffff; border-bottom: 1px solid #dee2e6; padding: 12px 20px;">
                    <h3 class="card-title" style="font-size: 16px; font-weight: 600;">Quality Pass Rate</h3>
                </div>
                <div class="card-body" style="background: #ffffff; padding: 10px 15px 15px 15px;">
                    <div style="position: relative; height: 140px;">
                        <canvas id="qualityChart"></canvas>
                    </div>
                    <div class="text-center mt-2">
                        <span class="badge bg-success" style="padding: 5px 12px; font-size: 12px;">Passed: {{ $data['quality']['today']['passed'] ?? 0 }}</span>
                        <span class="badge bg-danger" style="padding: 5px 12px; font-size: 12px;">Failed: {{ $data['quality']['today']['failed'] ?? 0 }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <br>
    
    <!-- Low Stock Alerts -->
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card" style="background: #ffffff;">
                <div class="card-header bg-danger text-white" style="padding: 12px 20px;">
                    <h3 class="card-title" style="font-size: 16px; font-weight: 600;">
                        <i class="bi bi-exclamation-triangle"></i> Low Stock Alerts
                    </h3>
                </div>
                <div class="card-body" style="background: #ffffff; padding: 15px 20px 20px 20px;">
                    @if(isset($data['low_stock_alert']))
                        <div class="row">
                            @if(!empty($data['low_stock_alert']['raw_materials']))
                            <div class="col-md-6">
                                <h5 style="margin-bottom: 10px; font-weight: 600; font-size: 14px;">Raw Materials</h5>
                                <div class="table-responsive" style="padding-right: 5px;">
                                    <table class="table table-sm table-bordered" style="background: #ffffff; margin-bottom: 0;">
                                        <thead class="table-light">
                                            <tr>
                                                <th style="padding: 8px 12px; font-size: 12px;">Material</th>
                                                <th style="padding: 8px 12px; font-size: 12px;">Current Stock</th>
                                                <th style="padding: 8px 12px; font-size: 12px;">Reorder Point</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($data['low_stock_alert']['raw_materials'] as $item)
                                            <tr>
                                                <td style="padding: 6px 12px; font-size: 12px;">{{ $item['name'] }}</td>
                                                <td style="padding: 6px 12px; font-size: 12px;" class="text-danger">{{ $item['current_stock'] }} {{ $item['unit'] }}</td>
                                                <td style="padding: 6px 12px; font-size: 12px;">{{ $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 style="margin-bottom: 10px; font-weight: 600; font-size: 14px;">Finished Products</h5>
                                <div class="table-responsive" style="padding-right: 5px;">
                                    <table class="table table-sm table-bordered" style="background: #ffffff; margin-bottom: 0;">
                                        <thead class="table-light">
                                            <tr>
                                                <th style="padding: 8px 12px; font-size: 12px;">Product</th>
                                                <th style="padding: 8px 12px; font-size: 12px;">Current Stock</th>
                                                <th style="padding: 8px 12px; font-size: 12px;">Reorder Point</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($data['low_stock_alert']['finished_products'] as $item)
                                            <tr>
                                                <td style="padding: 6px 12px; font-size: 12px;">{{ $item['name'] }}</td>
                                                <td style="padding: 6px 12px; font-size: 12px;" class="text-danger">{{ $item['current_stock'] }} {{ $item['unit'] }}</td>
                                                <td style="padding: 6px 12px; font-size: 12px;">{{ $item['reorder_point'] }}</td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    
    <br>
    <!-- Recent Orders -->
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card" style="background: #ffffff;">
                <div class="card-header" style="background: #ffffff; border-bottom: 1px solid #dee2e6; padding: 12px 20px;">
                    <h3 class="card-title" style="font-size: 16px; font-weight: 600;">Recent Production Orders</h3>
                </div>
                <div class="card-body" style="background: #ffffff; padding: 0 0 5px 0;">
                    <div class="table-responsive" style="padding: 0 20px 20px 20px;">
                        <table class="table table-bordered table-hover" style="background: #ffffff; margin-bottom: 0;">
                            <thead class="table-light">
                                <tr>
                                    <th style="padding: 10px 14px; font-size: 13px; font-weight: 600;">Order #</th>
                                    <th style="padding: 10px 14px; font-size: 13px; font-weight: 600;">Product</th>
                                    <th style="padding: 10px 14px; font-size: 13px; font-weight: 600;">Quantity</th>
                                    <th style="padding: 10px 14px; font-size: 13px; font-weight: 600;">Status</th>
                                    <th style="padding: 10px 14px; font-size: 13px; font-weight: 600;">Progress</th>
                                    <th style="padding: 10px 14px; font-size: 13px; font-weight: 600;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($data['recent_orders'] ?? [] as $order)
                                <tr>
                                    <td style="padding: 8px 14px; font-size: 12px;"><strong>{{ $order['order_number'] }}</strong></td>
                                    <td style="padding: 8px 14px; font-size: 12px;">{{ $order['product'] }}</td>
                                    <td style="padding: 8px 14px; font-size: 12px;">{{ number_format($order['quantity']) }}</td>
                                    <td style="padding: 8px 14px; font-size: 12px;">
                                        @php
                                            $statusColors = [
                                                'pending' => 'warning',
                                                'released' => 'info',
                                                'in_progress' => 'primary',
                                                'completed' => 'success',
                                                'closed' => 'secondary',
                                                'cancelled' => 'danger'
                                            ];
                                            $color = $statusColors[$order['status']] ?? 'secondary';
                                        @endphp
                                        <span class="badge bg-{{ $color }}" style="padding: 4px 10px; font-size: 11px;">
                                            {{ ucfirst($order['status']) }}
                                        </span>
                                    </td>
                                    <td style="padding: 8px 14px; font-size: 12px;">
                                        <div class="progress" style="height: 18px;">
                                            <div class="progress-bar" role="progressbar" style="width: {{ $order['progress'] }}%; font-size: 10px; line-height: 18px;">
                                                {{ round($order['progress']) }}%
                                            </div>
                                        </div>
                                    </td>
                                    <td style="padding: 8px 14px; font-size: 12px;">
                                        <a href="{{ route('manufacturing.production.orders.show', $order['id'] ?? 0) }}" class="btn btn-sm btn-info" style="padding: 2px 8px; font-size: 12px;">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center" style="padding: 30px 14px; font-size: 14px; color: #6c757d;">No recent orders</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</section>

<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;
    padding: 15px 15px 10px 15px;
}
.small-box .inner {
    padding: 5px 0 10px 0;
}
.small-box .inner h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 5px 0;
}
.small-box .inner p {
    font-size: 14px;
    margin: 0;
}
.small-box .icon {
    position: absolute;
    right: 15px;
    top: 15px;
    color: rgba(0,0,0,0.15);
    font-size: 60px;
}
.small-box .small-box-footer {
    display: block;
    padding: 5px 0 3px 0;
    color: #fff;
    text-align: center;
    text-decoration: none;
    z-index: 10;
    position: relative;
    font-size: 13px;
}
.small-box.bg-info { background-color: #17a2b8; color: #fff; }
.small-box.bg-success { background-color: #28a745; color: #fff; }
.small-box.bg-warning { background-color: #ffc107; color: #fff; }
.small-box.bg-danger { background-color: #dc3545; color: #fff; }

/* Card styles */
.card {
    border-radius: 10px;
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
    border: none;
}
.card-header {
    border-radius: 10px 10px 0 0 !important;
}
.table {
    background: #ffffff !important;
}
.table-light {
    background-color: #f8f9fa !important;
}
.table-bordered {
    border: 1px solid #dee2e6;
}
.table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6;
}
.table-hover tbody tr:hover {
    background-color: #f5f5f5 !important;
}

/* Progress bar styles */
.progress {
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar {
    background-color: #007bff;
    transition: width 0.6s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .small-box .inner h3 {
        font-size: 22px;
    }
    .small-box .icon {
        font-size: 40px;
    }
    .card-header {
        padding: 10px 15px !important;
    }
    .card-body {
        padding: 10px 15px !important;
    }
    .table-responsive {
        padding: 0 10px 10px 10px !important;
    }
    .table th,
    .table td {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
}
</style>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Production Trend Chart - Standard height (250px)
    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: '#007bff',
                        backgroundColor: 'rgba(0, 123, 255, 0.1)',
                        borderWidth: 2,
                        fill: false,
                        tension: 0.4,
                        pointRadius: 3,
                        pointBackgroundColor: '#007bff'
                    },
                    {
                        label: 'Actual',
                        data: trendData.map(d => d.actual),
                        borderColor: '#28a745',
                        backgroundColor: 'rgba(40, 167, 69, 0.1)',
                        borderWidth: 2,
                        fill: false,
                        tension: 0.4,
                        pointRadius: 3,
                        pointBackgroundColor: '#28a745'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            boxWidth: 12,
                            padding: 15,
                            font: {
                                size: 11,
                                weight: '500'
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)',
                            drawBorder: false
                        },
                        ticks: {
                            font: {
                                size: 10
                            },
                            padding: 5
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                size: 9
                            },
                            maxTicksLimit: 15,
                            padding: 5
                        }
                    }
                },
                elements: {
                    line: {
                        tension: 0.4
                    }
                },
                layout: {
                    padding: {
                        top: 10,
                        bottom: 5,
                        left: 5,
                        right: 10
                    }
                }
            }
        });
    }
    
    // Quality Chart - Reduced height (140px)
    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'],
                    borderWidth: 0,
                    hoverOffset: 5
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '55%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 10,
                            padding: 8,
                            font: {
                                size: 10,
                                weight: '500'
                            }
                        }
                    }
                },
                layout: {
                    padding: {
                        top: 5,
                        bottom: 5,
                        left: 5,
                        right: 5
                    }
                }
            }
        });
    }
</script>

@endsection