@extends('layouts.app')

@section('title', 'System Dashboard')

@section('content')
    <div class="mb-4 d-flex justify-content-between align-items-center">
        <div>
            <h4 class="mb-0 fw-bold">{{ __('Command Center') }}</h4>
            <p class="text-muted small mb-0">{{ __('Real-time ecosystem oversight and performance analytics.') }}</p>
        </div>
        <!--<div class="d-flex gap-2">
            <button class="btn btn-white shadow-sm btn-sm px-3 border"><i class="bi bi-download me-1"></i> {{ __('Export Data') }}</button>
            <button class="btn btn-primary shadow-sm btn-sm px-3"><i class="bi bi-plus-lg me-1"></i> {{ __('New Directive') }}</button>
        </div>-->
    </div>

    <!-- Quick Metrics -->
    <div class="row g-4 mb-4">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm rounded-4 p-3 h-100 position-relative overflow-hidden">
                <div class="position-absolute top-0 end-0 p-3 opacity-10">
                    <i class="bi bi-cpu fs-1"></i>
                </div>
                <span class="text-muted small fw-bold text-uppercase opacity-75">{{ __('Plant Efficiency (OEE)') }}</span>
                <div class="d-flex align-items-end gap-2 mt-2">
                    <h2 class="mb-0 fw-800">88.4%</h2>
                    <span class="text-success small mb-1"><i class="bi bi-arrow-up"></i> 3.2%</span>
                </div>
                <div class="progress mt-3" style="height: 6px;">
                    <div class="progress-bar bg-primary" role="progressbar" style="width: 88.4%"></div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm rounded-4 p-3 h-100 position-relative overflow-hidden">
                <div class="position-absolute top-0 end-0 p-3 opacity-10">
                    <i class="bi bi-box-seam fs-1"></i>
                </div>
                <span class="text-muted small fw-bold text-uppercase opacity-75">{{ __('Active Work Orders') }}</span>
                <div class="d-flex align-items-end gap-2 mt-2">
                    <h2 class="mb-0 fw-800">421</h2>
                    <span class="text-primary small mb-1">+14 today</span>
                </div>
                <div class="mt-3 d-flex gap-1">
                    <div class="bg-success rounded-pill" style="width: 60%; height: 6px;"></div>
                    <div class="bg-warning rounded-pill" style="width: 25%; height: 6px;"></div>
                    <div class="bg-danger rounded-pill" style="width: 15%; height: 6px;"></div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm rounded-4 p-3 h-100 position-relative overflow-hidden">
                <div class="position-absolute top-0 end-0 p-3 opacity-10">
                    <i class="bi bi-lightning-charge fs-1"></i>
                </div>
                <span class="text-muted small fw-bold text-uppercase opacity-75">{{ __('Power Consumption') }}</span>
                <div class="d-flex align-items-end gap-2 mt-2">
                    <h2 class="mb-0 fw-800">12.4 <small class="fs-6">MWh</small></h2>
                    <span class="text-danger small mb-1"><i class="bi bi-arrow-down"></i> 0.8%</span>
                </div>
                <div class="mt-3 small text-muted">{{ __('Peak: 14.2 MWh @ 14:00') }}</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm rounded-4 p-3 h-100 position-relative overflow-hidden bg-primary text-white">
                <div class="position-absolute top-0 end-0 p-3 opacity-25">
                    <i class="bi bi-currency-dollar fs-1"></i>
                </div>
                <span class="small fw-bold text-uppercase opacity-75">{{ __('Inventory Valuation') }}</span>
                <div class="d-flex align-items-end gap-2 mt-2">
                    <h2 class="mb-0 fw-800">$2.84M</h2>
                </div>
                <div class="mt-3 small opacity-75">{{ __('Liquidity index: High (0.92)') }}</div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <!-- Main Chart Section -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-header bg-transparent border-0 p-4 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 fw-bold">{{ __('Throughput Analytics') }}</h6>
                    <div class="btn-group shadow-sm border rounded-pill overflow-hidden">
                        <button class="btn btn-white btn-sm px-3 active">{{ __('Daily') }}</button>
                        <button class="btn btn-white btn-sm px-3">{{ __('Weekly') }}</button>
                        <button class="btn btn-white btn-sm px-3">{{ __('Market') }}</button>
                    </div>
                </div>
                <div class="card-body px-4 pb-4">
                    <canvas id="productionChart" style="max-height: 350px;"></canvas>
                </div>
            </div>
        </div>

        <!-- Live Sensor Grid -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-header bg-transparent border-0 p-4">
                    <h6 class="mb-0 fw-bold">{{ __('Live Sensor Telemetry') }}</h6>
                </div>
                <div class="card-body p-4 pt-0">
                    <div class="sensor-item mb-4">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="small fw-bold text-muted text-uppercase">Turbine Temperature</span>
                            <span class="badge bg-success-subtle text-success">Optimal</span>
                        </div>
                        <div class="d-flex align-items-center gap-3">
                            <div class="sensor-gauge" style="width: 60px; height: 6px; background: #e2e8f0; border-radius: 10px; flex-grow: 1; position: relative;">
                                <div style="width: 72%; height: 100%; background: var(--primary); border-radius: 10px;"></div>
                            </div>
                            <span class="fw-bold">72°C</span>
                        </div>
                    </div>
                    
                    <div class="sensor-item mb-4">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="small fw-bold text-muted text-uppercase">Robot Arm R-102 (Psi)</span>
                            <span class="badge bg-warning-subtle text-warning">Warning</span>
                        </div>
                        <div class="d-flex align-items-center gap-3">
                            <div class="sensor-gauge" style="width: 60px; height: 6px; background: #e2e8f0; border-radius: 10px; flex-grow: 1; position: relative;">
                                <div style="width: 89%; height: 100%; background: #f59e0b; border-radius: 10px;"></div>
                            </div>
                            <span class="fw-bold">2,420 p</span>
                        </div>
                    </div>

                    <div class="sensor-item mb-4">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="small fw-bold text-muted text-uppercase">Line 4 Humidity</span>
                            <span class="badge bg-info-subtle text-info">Controlled</span>
                        </div>
                        <div class="d-flex align-items-center gap-3">
                            <div class="sensor-gauge" style="width: 60px; height: 6px; background: #e2e8f0; border-radius: 10px; flex-grow: 1; position: relative;">
                                <div style="width: 45%; height: 100%; background: #06b6d4; border-radius: 10px;"></div>
                            </div>
                            <span class="fw-bold">45%</span>
                        </div>
                    </div>

                    <div class="p-3 bg-light rounded-4">
                        <div class="d-flex align-items-center gap-3">
                            <div class="bg-white p-2 rounded-circle shadow-sm">
                                <i class="bi bi-shield-check text-success fs-4"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold small">Safety Protocol V4</h6>
                                <p class="text-muted small mb-0">System status: All clear</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Machine Breakdown -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm rounded-4 p-4">
                <h6 class="fw-bold mb-4">Resource Allocation</h6>
                <div class="row align-items-center">
                    <div class="col-md-5">
                        <canvas id="resourceDoughnut" style="max-width: 180px;"></canvas>
                    </div>
                    <div class="col-md-7">
                        <div class="mb-3 d-flex align-items-center gap-3">
                            <div class="p-2 rounded-3 bg-primary-subtle" style="width: 8px; height: 8px;"></div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between small fw-bold">
                                    <span>Production</span>
                                    <span>65%</span>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 d-flex align-items-center gap-3">
                            <div class="p-2 rounded-3 bg-info-subtle" style="width: 8px; height: 8px;"></div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between small fw-bold">
                                    <span>Assembly</span>
                                    <span>20%</span>
                                </div>
                            </div>
                        </div>
                        <div class="mb-0 d-flex align-items-center gap-3">
                            <div class="p-2 rounded-3 bg-warning-subtle" style="width: 8px; height: 8px;"></div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between small fw-bold">
                                    <span>Quality Check</span>
                                    <span>15%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Global Activity -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm rounded-4 p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h6 class="fw-bold mb-0">Real-time Directives</h6>
                    <a href="#" class="small text-decoration-none fw-bold">View History</a>
                </div>
                <div class="timeline">
                    <div class="d-flex gap-3 mb-4">
                        <div class="bg-success-subtle text-success p-2 rounded-circle shadow-sm" style="width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;">
                            <i class="bi bi-check-lg small"></i>
                        </div>
                        <div>
                            <h6 class="mb-0 small fw-bold text-dark">Work Order #742 Completed</h6>
                            <p class="text-muted mb-0" style="font-size: 0.75rem;">Line 3 delivered 4,200 components to Warehouse B.</p>
                            <span class="text-muted extra-small" style="font-size: 0.65rem;">2 minutes ago</span>
                        </div>
                    </div>
                    <div class="d-flex gap-3">
                        <div class="bg-warning-subtle text-warning p-2 rounded-circle shadow-sm" style="width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;">
                            <i class="bi bi-tools small"></i>
                        </div>
                        <div>
                            <h6 class="mb-0 small fw-bold text-dark">Scheduled Maintenance Approaching</h6>
                            <p class="text-muted mb-0" style="font-size: 0.75rem;">Robot Arm R-102 is due for calibration in 4 hours.</p>
                            <span class="text-muted extra-small" style="font-size: 0.65rem;">14 minutes ago</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Line Chart
        const ctxProduction = document.getElementById('productionChart').getContext('2d');
        const productionGradient = ctxProduction.createLinearGradient(0, 0, 0, 400);
        productionGradient.addColorStop(0, 'rgba(59, 130, 246, 0.2)');
        productionGradient.addColorStop(1, 'rgba(59, 130, 246, 0)');

        new Chart(ctxProduction, {
            type: 'line',
            data: {
                labels: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
                datasets: [{
                    label: 'Unit Output',
                    data: [120, 340, 560, 430, 780, 890, 720, 640],
                    borderColor: '#3b82f6',
                    borderWidth: 3,
                    fill: true,
                    backgroundColor: productionGradient,
                    tension: 0.4,
                    pointRadius: 4,
                    pointBackgroundColor: '#fff',
                    pointBorderColor: '#3b82f6',
                    pointBorderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)', drawBorder: false } },
                    x: { grid: { display: false } }
                }
            }
        });

        // Doughnut Chart
        const ctxDoughnut = document.getElementById('resourceDoughnut').getContext('2d');
        new Chart(ctxDoughnut, {
            type: 'doughnut',
            data: {
                labels: ['Production', 'Assembly', 'Quality'],
                datasets: [{
                    data: [65, 20, 15],
                    backgroundColor: ['#3b82f6', '#06b6d4', '#f59e0b'],
                    borderWidth: 0,
                    hoverOffset: 4
                }]
            },
            options: {
                cutout: '75%',
                responsive: true,
                plugins: { legend: { display: false } }
            }
        });
    });
</script>
@endsection

@section('styles')
<style>
    .fw-800 { font-weight: 800; }
    .btn-white { background: #fff; color: #1e293b; }
    .btn-white:hover { background: #f8fafc; }
    .card { transition: transform 0.3s; }
    .card:hover { transform: translateY(-5px); }
    .progress-bar { border-radius: 10px; }
    .sensor-item .badge { font-size: 0.65rem; padding: 0.4em 1em; border-radius: 50px; }
</style>
@endsection