@extends('layouts.app')
@section('title','Costo por Equipo')
@section('page-title','Análisis de Costo por Equipo — Mantenimiento')

@section('content')
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row align-items-end g-2">
            <div class="col-md-2">
                <label class="small fw-bold">Desde</label>
                <input type="date" name="desde" class="form-control form-control-sm" value="{{ $desde }}">
            </div>
            <div class="col-md-2">
                <label class="small fw-bold">Hasta</label>
                <input type="date" name="hasta" class="form-control form-control-sm" value="{{ $hasta }}">
            </div>
            <div class="col-md-2">
                <button class="btn btn-warning btn-sm btn-block"><i class="fas fa-search mr-1"></i>Filtrar</button>
            </div>
        </form>
    </div>
</div>

<div class="row mb-3">
    <div class="col-md-4">
        <div class="info-box bg-danger">
            <span class="info-box-icon"><i class="fas fa-dollar-sign"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Costo Total</span>
                <span class="info-box-number">S/ {{ number_format($costoTotal,2) }}</span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="info-box bg-info">
            <span class="info-box-icon"><i class="fas fa-shield-alt"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Mant. Preventivo</span>
                <span class="info-box-number">S/ {{ number_format($costoPreventivo,2) }}</span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="info-box bg-warning">
            <span class="info-box-icon"><i class="fas fa-tools"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Mant. Correctivo</span>
                <span class="info-box-number">S/ {{ number_format($costoCorrectivo,2) }}</span>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card mb-3">
            <div class="card-header py-2"><h3 class="card-title">Costo por Equipo (Top)</h3></div>
            <div class="card-body p-0">
                <table class="table table-sm table-hover mb-0">
                    <thead class="thead-dark">
                        <tr>
                            <th>Equipo</th>
                            <th class="text-center">OTs</th>
                            <th class="text-center">Preventivo</th>
                            <th class="text-center">Correctivo</th>
                            <th class="text-center">Total</th>
                            <th class="text-center">% del Total</th>
                            <th class="text-center">MTTR</th>
                            <th class="text-center">Min. Paro</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($porEquipo as $r)
                        @php $pct = $costoTotal > 0 ? round($r['costo_total']/$costoTotal*100,1) : 0; @endphp
                        <tr>
                            <td>
                                <strong>{{ $r['equipo']?->nombre ?? '—' }}</strong>
                                <small class="text-muted d-block">{{ $r['equipo']?->area ?? '' }}</small>
                            </td>
                            <td class="text-center">{{ $r['total_ot'] }}</td>
                            <td class="text-center text-info">S/ {{ number_format($r['costo_preventivo'],0) }}</td>
                            <td class="text-center text-warning">S/ {{ number_format($r['costo_correctivo'],0) }}</td>
                            <td class="text-center font-weight-bold">S/ {{ number_format($r['costo_total'],0) }}</td>
                            <td class="text-center">
                                <div class="progress" style="height:16px">
                                    <div class="progress-bar {{ $pct>30 ? 'bg-danger' : ($pct>15 ? 'bg-warning' : 'bg-success') }}"
                                         style="width:{{ $pct }}%">{{ $pct }}%</div>
                                </div>
                            </td>
                            <td class="text-center small">{{ $r['mttr'] > 0 ? $r['mttr'].' min' : '—' }}</td>
                            <td class="text-center small {{ $r['min_paros'] > 0 ? 'text-danger' : 'text-muted' }}">{{ $r['min_paros'] > 0 ? number_format($r['min_paros']).' min' : '—' }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="8" class="text-center text-muted py-3">Sin datos en el período seleccionado.</td></tr>
                        @endforelse
                    </tbody>
                    @if($porEquipo->isNotEmpty())
                    <tfoot class="thead-light">
                        <tr>
                            <th>TOTAL</th>
                            <th class="text-center">{{ $porEquipo->sum('total_ot') }}</th>
                            <th class="text-center">S/ {{ number_format($costoPreventivo,0) }}</th>
                            <th class="text-center">S/ {{ number_format($costoCorrectivo,0) }}</th>
                            <th class="text-center">S/ {{ number_format($costoTotal,0) }}</th>
                            <th class="text-center">100%</th>
                            <th colspan="2"></th>
                        </tr>
                    </tfoot>
                    @endif
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header py-2"><h3 class="card-title">Distribución de costos</h3></div>
            <div class="card-body">
                <canvas id="chartCosto" height="220"></canvas>
                @if($costoTotal > 0)
                <div class="mt-3 text-center small">
                    <span class="text-info"><i class="fas fa-circle mr-1"></i>Preventivo {{ round($costoPreventivo/$costoTotal*100) }}%</span>
                    &nbsp;
                    <span class="text-warning"><i class="fas fa-circle mr-1"></i>Correctivo {{ round($costoCorrectivo/$costoTotal*100) }}%</span>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3/dist/chart.min.js"></script>
<script>
@if($costoTotal > 0)
new Chart(document.getElementById('chartCosto').getContext('2d'), {
    type: 'doughnut',
    data: {
        labels: @json($porEquipo->take(6)->pluck('equipo')->pluck('nombre')),
        datasets: [{
            data: @json($porEquipo->take(6)->pluck('costo_total')),
            backgroundColor: ['#dc3545','#fd7e14','#ffc107','#17a2b8','#28a745','#6c757d'],
        }]
    },
    options: { responsive: true, plugins: { legend: { position: 'bottom' } } }
});
@endif
</script>
@endpush