@extends('layouts.app')
@section('title', 'No Conformidades — Reportes Calidad')
@section('page-title', 'No Conformidades')
@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">No Conformidades</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 No Conformidades</span><br>
        <small>
            Impreso el {{ now()->format('d/m/Y H:i') }}
            @if(request()->hasAny(['desde','hasta','estado','origen','tipo']))
                &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('origen')) · {{ ucwords(str_replace('_',' ',request('origen'))) }} @endif
                @if(request('tipo')) · {{ ucwords(str_replace('_',' ',request('tipo'))) }} @endif
            @endif
        </small>
    </div>
</div>

{{-- Filtros --}}
<div class="card card-outline card-danger 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.no-conformidades') }}">
            <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="abierta"    {{ request('estado') === 'abierta'    ? 'selected' : '' }}>Abierta</option>
                            <option value="en_proceso" {{ request('estado') === 'en_proceso' ? 'selected' : '' }}>En proceso</option>
                            <option value="cerrada"    {{ request('estado') === 'cerrada'    ? 'selected' : '' }}>Cerrada</option>
                            <option value="verificada" {{ request('estado') === 'verificada' ? 'selected' : '' }}>Verificada</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>
                            <option value="recepcion_mp"   {{ request('origen') === 'recepcion_mp'   ? 'selected' : '' }}>Recepción MP</option>
                            <option value="proceso"        {{ request('origen') === 'proceso'        ? 'selected' : '' }}>Proceso</option>
                            <option value="producto_final" {{ request('origen') === 'producto_final' ? 'selected' : '' }}>Producto final</option>
                            <option value="proveedor"      {{ request('origen') === 'proveedor'      ? 'selected' : '' }}>Proveedor</option>
                            <option value="cliente"        {{ request('origen') === 'cliente'        ? 'selected' : '' }}>Cliente</option>
                            <option value="interno"        {{ request('origen') === 'interno'        ? 'selected' : '' }}>Interno</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group mb-0">
                        <label class="small mb-1">Tipo</label>
                        <select name="tipo" class="form-control form-control-sm">
                            <option value="">— Todos —</option>
                            <option value="mayor"           {{ request('tipo') === 'mayor'           ? 'selected' : '' }}>Mayor</option>
                            <option value="menor"           {{ request('tipo') === 'menor'           ? 'selected' : '' }}>Menor</option>
                            <option value="critica"         {{ request('tipo') === 'critica'         ? 'selected' : '' }}>Crítica</option>
                            <option value="elemento_extrano"{{ request('tipo') === 'elemento_extrano'? 'selected' : '' }}>Elemento extraño</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2 d-flex align-items-end flex-wrap gap-1">
                    <button type="submit" class="btn btn-danger btn-sm mr-1"><i class="fas fa-search mr-1"></i>Buscar</button>
                    <a href="{{ route('calidad.reportes.no-conformidades') }}" class="btn btn-secondary btn-sm mr-1">Limpiar</a>
                    <a href="{{ route('calidad.reportes.no-conformidades-csv', request()->only(['desde','hasta','estado','origen','tipo'])) }}"
                       class="btn btn-success btn-sm" title="Exportar CSV">
                        <i class="fas fa-file-csv"></i>
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Totales --}}
<div class="row mb-3 no-print">
    <div class="col-6 col-md-2">
        <div class="info-box shadow-sm">
            <span class="info-box-icon bg-secondary elevation-1"><i class="fas fa-list"></i></span>
            <div class="info-box-content">
                <span class="info-box-text small">Total</span>
                <span class="info-box-number">{{ $totales['total'] }}</span>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-2">
        <div class="info-box shadow-sm">
            <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-exclamation-triangle"></i></span>
            <div class="info-box-content">
                <span class="info-box-text small">Abiertas</span>
                <span class="info-box-number">{{ $totales['abiertas'] }}</span>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="info-box shadow-sm">
            <span class="info-box-icon bg-warning 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-6 col-md-2">
        <div class="info-box shadow-sm">
            <span class="info-box-icon bg-info elevation-1"><i class="fas fa-times-circle"></i></span>
            <div class="info-box-content">
                <span class="info-box-text small">Cerradas</span>
                <span class="info-box-number">{{ $totales['cerradas'] }}</span>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="info-box shadow-sm">
            <span class="info-box-icon bg-success elevation-1"><i class="fas fa-check-double"></i></span>
            <div class="info-box-content">
                <span class="info-box-text small">Verificadas</span>
                <span class="info-box-number">{{ $totales['verificadas'] }}</span>
            </div>
        </div>
    </div>
</div>

{{-- Resumen imprimible --}}
<div class="print-only mb-2">
    <span><strong>Total:</strong> {{ $totales['total'] }}</span> &nbsp;·&nbsp;
    <span><strong>Abiertas:</strong> {{ $totales['abiertas'] }}</span> &nbsp;·&nbsp;
    <span><strong>En proceso:</strong> {{ $totales['en_proceso'] }}</span> &nbsp;·&nbsp;
    <span><strong>Cerradas:</strong> {{ $totales['cerradas'] }}</span> &nbsp;·&nbsp;
    <span><strong>Verificadas:</strong> {{ $totales['verificadas'] }}</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> No Conformidades ({{ $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>Origen</th>
                    <th>Tipo</th>
                    <th>Descripción</th>
                    <th>Responsable</th>
                    <th>Vence</th>
                    <th>Estado</th>
                    <th class="col-no-print"></th>
                </tr>
            </thead>
            <tbody>
                @forelse($registros as $nc)
                <tr>
                    <td><small>{{ $nc->codigo }}</small></td>
                    <td>{{ $nc->created_at->format('d/m/Y') }}</td>
                    <td><small>{{ ucwords(str_replace('_', ' ', $nc->origen ?? '—')) }}</small></td>
                    <td><small>{{ ucwords(str_replace('_', ' ', $nc->tipo ?? '—')) }}</small></td>
                    <td><small>{{ Str::limit($nc->descripcion, 50) }}</small></td>
                    <td><small>{{ $nc->responsable->name ?? '—' }}</small></td>
                    <td>
                        @if($nc->fecha_limite)
                            <span class="{{ \Carbon\Carbon::parse($nc->fecha_limite)->isPast() && !in_array($nc->estado, ['cerrada','verificada']) ? 'text-danger font-weight-bold' : '' }}">
                                {{ \Carbon\Carbon::parse($nc->fecha_limite)->format('d/m/Y') }}
                            </span>
                        @else —@endif
                    </td>
                    <td><span class="badge badge-{{ $nc->badge_color }}">{{ strtoupper($nc->estado) }}</span></td>
                    <td class="col-no-print">
                        <a href="{{ route('calidad.no-conformidades.show', $nc) }}" 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