@extends('layouts.app')
@section('title', 'Control en Línea — Reportes Calidad')
@section('page-title', 'Control en 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">Control en 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 Control en Línea</span><br>
        <small>
            Impreso el {{ now()->format('d/m/Y H:i') }}
            @if(request()->hasAny(['desde','hasta','fruta_id','estado','turno']))
                &nbsp;·&nbsp; Filtros:
                @if(request('desde')) Desde {{ request('desde') }} @endif
                @if(request('hasta')) Hasta {{ request('hasta') }} @endif
                @if(request('estado')) · {{ strtoupper(str_replace('_',' ',request('estado'))) }} @endif
                @if(request('turno')) · Turno {{ ucfirst(request('turno')) }} @endif
            @endif
        </small>
    </div>
</div>

{{-- Filtros --}}
<div class="card card-outline card-primary 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.controles-linea') }}">
            <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-3">
                    <div class="form-group mb-0">
                        <label class="small mb-1">Fruta</label>
                        <select name="fruta_id" class="form-control form-control-sm">
                            <option value="">— Todas —</option>
                            @foreach($frutas as $f)
                            <option value="{{ $f->id }}" {{ request('fruta_id') == $f->id ? 'selected' : '' }}>{{ $f->nombre }}</option>
                            @endforeach
                        </select>
                    </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="en_proceso" {{ request('estado') === 'en_proceso' ? 'selected' : '' }}>En proceso</option>
                            <option value="completado" {{ request('estado') === 'completado' ? 'selected' : '' }}>Completado</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-0">
                        <label class="small mb-1">Turno</label>
                        <select name="turno" class="form-control form-control-sm">
                            <option value="">— Todos —</option>
                            <option value="manana" {{ request('turno') === 'manana' ? 'selected' : '' }}>Mañana</option>
                            <option value="tarde"  {{ request('turno') === 'tarde'  ? 'selected' : '' }}>Tarde</option>
                            <option value="noche"  {{ request('turno') === 'noche'  ? 'selected' : '' }}>Noche</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary btn-sm mr-1"><i class="fas fa-search"></i></button>
                    <a href="{{ route('calidad.reportes.controles-linea') }}" class="btn btn-secondary btn-sm"><i class="fas fa-times"></i></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-flask"></i></span>
            <div class="info-box-content">
                <span class="info-box-text small">Total controles</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-primary elevation-1"><i class="fas fa-spinner"></i></span>
            <div class="info-box-content">
                <span class="info-box-text small">En proceso</span>
                <span class="info-box-number">{{ $totales['en_proceso'] }}</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">Completados</span>
                <span class="info-box-number">{{ $totales['completados'] }}</span>
            </div>
        </div>
    </div>
</div>

{{-- Resumen imprimible --}}
<div class="print-only mb-2">
    <span><strong>Total:</strong> {{ $totales['total'] }}</span> &nbsp;·&nbsp;
    <span><strong>En proceso:</strong> {{ $totales['en_proceso'] }}</span> &nbsp;·&nbsp;
    <span><strong>Completados:</strong> {{ $totales['completados'] }}</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> Controles en 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>Fruta</th>
                    <th>Lote</th>
                    <th>Turno</th>
                    <th class="text-center">Muestras</th>
                    <th>Responsable</th>
                    <th>Estado</th>
                    <th class="col-no-print"></th>
                </tr>
            </thead>
            <tbody>
                @forelse($registros as $cl)
                <tr>
                    <td><small class="text-muted">{{ $cl->codigo }}</small></td>
                    <td>{{ $cl->fecha->format('d/m/Y') }}</td>
                    <td>{{ $cl->fruta->nombre }}</td>
                    <td><small>{{ $cl->lote->codigo ?? '—' }}</small></td>
                    <td><small>{{ $cl->turno_label }}</small></td>
                    <td class="text-center">
                        <span class="badge badge-{{ $cl->muestras_count > 0 ? 'info' : 'secondary' }}">{{ $cl->muestras_count }}</span>
                    </td>
                    <td><small>{{ $cl->responsable->name ?? '—' }}</small></td>
                    <td><span class="badge badge-{{ $cl->badge_color }}">{{ strtoupper(str_replace('_', ' ', $cl->estado)) }}</span></td>
                    <td class="col-no-print">
                        <a href="{{ route('calidad.controles-linea.show', $cl) }}" class="btn btn-xs btn-outline-secondary"><i class="fas fa-eye"></i></a>
                    </td>
                </tr>
                @empty
                <tr><td colspan="9" 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