@extends('layouts.app')

@section('title', 'Production Report')

@section('content')
    <div class="mb-4 d-flex align-items-center gap-3">
        <a href="{{ route('reports.index') }}" class="btn btn-light btn-sm rounded-circle"><i class="bi bi-arrow-left"></i></a>
        <div>
            <h4 class="mb-0 fw-bold">Production Summary Report</h4>
            <p class="text-muted small mb-0">Operational efficiency and plant output analysis.</p>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <div class="row g-4 text-center">
                <div class="col-md-3 border-end">
                    <h6 class="text-muted small text-uppercase fw-bold">Daily Target</h6>
                    <h3 class="mb-0 fw-bold text-primary">2,500 Units</h3>
                </div>
                <div class="col-md-3 border-end">
                    <h6 class="text-muted small text-uppercase fw-bold">Current Output</h6>
                    <h3 class="mb-0 fw-bold text-success">2,348 Units</h3>
                </div>
                <div class="col-md-3 border-end">
                    <h6 class="text-muted small text-uppercase fw-bold">Overall OEE</h6>
                    <h3 class="mb-0 fw-bold text-info">84.2%</h3>
                </div>
                <div class="col-md-3">
                    <h6 class="text-muted small text-uppercase fw-bold">Active Downtime</h6>
                    <h3 class="mb-0 fw-bold text-danger">42 Min</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white py-3">
                    <h6 class="mb-0 fw-bold">Output Trend (Last 7 Days)</h6>
                </div>
                <div class="card-body">
                    <div style="height: 300px;" class="bg-light rounded-3 d-flex align-items-center justify-content-center border-dashed">
                        <span class="text-muted small"><i class="bi bi-graph-up me-2"></i> Production Chart Placeholder</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white py-3">
                    <h6 class="mb-0 fw-bold">Plant Efficiency</h6>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <div>
                                <h6 class="mb-0 small">Northern Plant</h6>
                                <small class="text-muted">Assembly A1</small>
                            </div>
                            <span class="badge bg-success-subtle text-success rounded-pill">92%</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <div>
                                <h6 class="mb-0 small">Southern Plant</h6>
                                <small class="text-muted">Packaging P2</small>
                            </div>
                            <span class="badge bg-warning-subtle text-warning rounded-pill">78%</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection