@extends('layouts.app')
@section('title', 'Paros de Línea — Reportes Calidad')
@section('page-title', 'Paros de Línea')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('calidad.dashboard') }}">Calidad</a></li>
    <li class="breadcrumb-item"><a href="{{ route('calidad.reportes.index') }}">Reportes</a></li>
    <li class="breadcrumb-item active">Paros de Línea</li>
@endsection

@push('styles')
<style>
.print-only { display: none; }
@media print {
    .main-sidebar, .main-header, .content-header, .no-print { display: none !important; }
    .content-wrapper { margin-left: 0 !important; padding: 0 !important; }
    .wrapper { overflow: visible !important; }
    .print-only { display: block !important; margin-bottom: 12px; }
    .card { box-shadow: none !important; border: 1px solid #ccc !important; page-break-inside: avoid; }
    .card-header { background: #f4f6f9 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .table td, .table th { font-size: 10.5px !important; padding: 4px 6px !important; }
    .thead-light th { background: #e9ecef !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a { color: #000 !important; text-decoration: none !important; }
    .badge { border: 1px solid #999; background: transparent !important; color: #000 !important; font-weight: bold; }
    .col-no-print, th.col-no-print { display: none !important; }
}
</style>
@endpush

@section('content')

{{-- Encabezado solo para impresión --}}
<div class="print-only">
    <div style="text-align:center; border-bottom:2px solid #333; padding-bottom:8px; margin-bottom:8px;">
        <strong style="font-size:16px;">SABORES MAYBELL S.A.C.</strong><br>
        <span style="font-size:13px;">Reporte de Paros de Línea</span><br>
        <small>
            Impreso el {{ now()->format('d/m/Y H:i') }}
            @if(request()->hasAny(['desde','hasta','estado','origen','causa']))
                &nbsp;·&nbsp; Filtros:
                @if(request('desde')) Desde {{ request('desde') }} @endif
                @if(request('hasta')) Hasta {{ request('hasta') }} @endif
                @if(request('estado')) · {{ strtoupper(request('estado')) }} @endif
                @if(request('causa')) · {{ \App\Models\ParoLinea::$CAUSAS[request('causa')] ?? request('causa') }} @endif
            @endif
        </small>
    </div>
</div>

{{-- Filtros --}}
<div class="card card-outline card-warning no-print">
    <div class="card-header"><h3 class="card-title"><i class="fas fa-filter mr-1"></i> Filtros</h3></div>
    <div class="card-body">
        <form method="GET" action="{{ route('calidad.reportes.paros') }}">
            <div class="row">
                <div class="col-md-2">
                    <div class="form-group mb-0">
                        <label class="small mb-1">Desde</label>
                        <input type="date" name="desde" value="{{ request('desde') }}" class="form-control form-control-sm">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-0">
                        <label class="small mb-1">Hasta</label>
                        <input type="date" name="hasta" value="{{ request('hasta') }}" class="form-control form-control-sm">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-0">
                        <label class="small mb-1">Estado</label>
                        <select name="estado" class="form-control form-control-sm">
                            <option value="">— Todos —</option>
                            <option value="activo"  {{ request('estado') === 'activo'  ? 'selected' : '' }}>Activo</option>
                            <option value="cerrado" {{ request('estado') === 'cerrado' ? 'selected' : '' }}>Cerrado</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-0">
                        <label class="small mb-1">Origen</label>
                        <select name="origen" class="form-control form-control-sm">
                            <option value="">— Todos —</option>
                            @foreach(\App\Models\ParoLinea::$ORIGENES as $key => $label)
                            <option value="{{ $key }}" {{ request('origen') === $key ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-0">
                        <label class="small mb-1">Causa</label>
                        <select name="causa" class="form-control form-control-sm">
                            <option value="">— Todas —</option>
                            @foreach(\App\Models\ParoLinea::$CAUSAS as $key => $label)
                            <option value="{{ $key }}" {{ request('causa') === $key ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-warning btn-sm mr-2"><i class="fas fa-search mr-1"></i>Buscar</button>
                    <a href="{{ route('calidad.reportes.paros') }}" class="btn btn-secondary btn-sm">Limpiar</a>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Totales --}}
<div class="row mb-3 no-print">
    <div class="col-md-4">
        <div class="info-box shadow-sm">
            <span class="info-box-icon bg-secondary elevation-1"><i class="fas fa-stop-circle"></i></span>
            <div class="info-box-content">
                <span class="info-box-text small">Total paros</span>
                <span class="info-box-number">{{ $totales['total'] }}</span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="info-box shadow-sm">
            <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-exclamation-triangle"></i></span>
            <div class="info-box-content">
                <span class="info-box-text small">Activos</span>
                <span class="info-box-number">{{ $totales['activos'] }}</span>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="info-box shadow-sm">
            <span class="info-box-icon bg-success elevation-1"><i class="fas fa-check-circle"></i></span>
            <div class="info-box-content">
                <span class="info-box-text small">Cerrados</span>
                <span class="info-box-number">{{ $totales['cerrados'] }}</span>
            </div>
        </div>
    </div>
</div>

{{-- Resumen imprimible --}}
<div class="print-only mb-2">
    <span><strong>Total:</strong> {{ $totales['total'] }}</span> &nbsp;·&nbsp;
    <span><strong>Activos:</strong> {{ $totales['activos'] }}</span> &nbsp;·&nbsp;
    <span><strong>Cerrados:</strong> {{ $totales['cerrados'] }}</span>
</div>

{{-- Tabla --}}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title"><i class="fas fa-list mr-1"></i> Paros de Línea ({{ $registros->total() }})</h3>
        <button onclick="window.print()" class="btn btn-sm btn-outline-secondary no-print">
            <i class="fas fa-print mr-1"></i> Imprimir
        </button>
    </div>
    <div class="card-body p-0">
        <table class="table table-sm table-hover mb-0">
            <thead class="thead-light">
                <tr>
                    <th>Código</th>
                    <th>Fecha</th>
                    <th>Línea / Área</th>
                    <th>Origen</th>
                    <th>Causa</th>
                    <th>Inicio</th>
                    <th>Fin</th>
                    <th>Duración</th>
                    <th>Responsable</th>
                    <th>Estado</th>
                    <th class="col-no-print"></th>
                </tr>
            </thead>
            <tbody>
                @forelse($registros as $p)
                <tr>
                    <td><small>{{ $p->codigo }}</small></td>
                    <td>{{ $p->fecha->format('d/m/Y') }}</td>
                    <td><small>{{ $p->linea }}<br><span class="text-muted">{{ $p->area_responsable }}</span></small></td>
                    <td><small>{{ \App\Models\ParoLinea::$ORIGENES[$p->origen] ?? $p->origen }}</small></td>
                    <td><small>{{ \App\Models\ParoLinea::$CAUSAS[$p->causa] ?? $p->causa }}</small></td>
                    <td>{{ $p->hora_inicio }}</td>
                    <td>{{ $p->hora_fin ?? '—' }}</td>
                    <td>
                        @if($p->hora_fin)
                            <small>{{ $p->duracion }}</small>
                        @else
                            <span class="badge badge-warning">En curso</span>
                        @endif
                    </td>
                    <td><small>{{ $p->responsable->name ?? '—' }}</small></td>
                    <td><span class="badge badge-{{ $p->badge_color }}">{{ strtoupper($p->estado) }}</span></td>
                    <td class="col-no-print">
                        <a href="{{ route('calidad.paros.show', $p) }}" class="btn btn-xs btn-outline-secondary"><i class="fas fa-eye"></i></a>
                    </td>
                </tr>
                @empty
                <tr><td colspan="11" class="text-center text-muted py-3">No hay registros para los filtros seleccionados.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($registros->hasPages())
    <div class="card-footer no-print">{{ $registros->links() }}</div>
    @endif
</div>
@endsection