@extends('layouts.app')
@section('title','Tendencias Brix/pH')
@section('page-title','Tendencias Brix/pH por Proveedor')

@section('content')
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row align-items-end">
            <div class="col-md-2 form-group mb-0">
                <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 form-group mb-0">
                <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-3 form-group mb-0">
                <label class="small fw-bold">Fruta</label>
                <select name="fruta_id" class="form-control form-control-sm">
                    <option value="">— Todas —</option>
                    @foreach($frutas as $f)
                    <option value="{{ $f->id }}" @selected($fruta_id == $f->id)>{{ $f->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 form-group mb-0">
                <label class="small fw-bold">Proveedor</label>
                <select name="proveedor_id" class="form-control form-control-sm">
                    <option value="">— Todos —</option>
                    @foreach($proveedores as $p)
                    <option value="{{ $p->id }}" @selected($proveedor_id == $p->id)>{{ $p->razon_social }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <button class="btn btn-success btn-sm btn-block"><i class="fas fa-search mr-1"></i>Filtrar</button>
            </div>
        </form>
    </div>
</div>

@if($frutaSeleccionada)
<div class="alert alert-success py-2 mb-3">
    <i class="fas fa-info-circle mr-1"></i>
    <strong>Rangos de referencia — {{ $frutaSeleccionada->nombre }}:</strong>
    &nbsp; Brix: <strong>{{ $frutaSeleccionada->brix_min }} – {{ $frutaSeleccionada->brix_max }}</strong>
    &nbsp;|&nbsp; pH: <strong>{{ $frutaSeleccionada->ph_min }} – {{ $frutaSeleccionada->ph_max }}</strong>
</div>
@endif

@if($recepciones->isEmpty())
<div class="alert alert-warning"><i class="fas fa-exclamation-triangle mr-1"></i>Sin datos Brix/pH en el período seleccionado.</div>
@else

<div class="row">
    <div class="col-md-8">
        <div class="card mb-3">
            <div class="card-header py-2"><h3 class="card-title"><i class="fas fa-chart-line mr-1"></i>Evolución semanal</h3></div>
            <div class="card-body"><canvas id="chartBrix" height="140"></canvas></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-vials"></i></span>
            <div class="info-box-content">
                <span class="info-box-text small">Total Recepciones</span>
                <span class="info-box-number">{{ $recepciones->count() }}</span>
            </div>
        </div>
        <div class="info-box shadow-sm">
            <span class="info-box-icon bg-info elevation-1"><i class="fas fa-tint"></i></span>
            <div class="info-box-content">
                <span class="info-box-text small">Brix Prom. Global</span>
                <span class="info-box-number">{{ round($recepciones->avg('brix_promedio'),2) }}</span>
            </div>
        </div>
        <div class="info-box shadow-sm">
            <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-flask"></i></span>
            <div class="info-box-content">
                <span class="info-box-text small">pH Prom. Global</span>
                <span class="info-box-number">{{ round($recepciones->avg('ph_promedio'),2) }}</span>
            </div>
        </div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header py-2"><h3 class="card-title">Resumen por Proveedor</h3></div>
    <div class="card-body p-0">
        <table class="table table-sm table-hover mb-0">
            <thead class="thead-dark">
                <tr>
                    <th>Proveedor</th>
                    <th class="text-center">N°</th>
                    <th class="text-center">Brix Prom</th>
                    <th class="text-center">Brix Min–Max</th>
                    <th class="text-center">pH Prom</th>
                    <th class="text-center">pH Min–Max</th>
                    <th class="text-center">% Aprobación</th>
                </tr>
            </thead>
            <tbody>
                @foreach($porProveedor as $row)
                @php
                    $brixOk = !$frutaSeleccionada || ($row['brix_prom'] >= $frutaSeleccionada->brix_min && $row['brix_prom'] <= $frutaSeleccionada->brix_max);
                    $phOk   = !$frutaSeleccionada || ($row['ph_prom']   >= $frutaSeleccionada->ph_min   && $row['ph_prom']   <= $frutaSeleccionada->ph_max);
                @endphp
                <tr>
                    <td>
                        <strong>{{ $row['proveedor']?->razon_social ?? 'Sin nombre' }}</strong>
                        <small class="text-muted d-block">{{ $row['proveedor']?->ruc }}</small>
                    </td>
                    <td class="text-center">{{ $row['n'] }}</td>
                    <td class="text-center font-weight-bold {{ $frutaSeleccionada ? ($brixOk ? 'text-success' : 'text-danger') : '' }}">
                        {{ $row['brix_prom'] }}
                    </td>
                    <td class="text-center text-muted small">{{ $row['brix_min'] }} – {{ $row['brix_max'] }}</td>
                    <td class="text-center font-weight-bold {{ $frutaSeleccionada ? ($phOk ? 'text-success' : 'text-danger') : '' }}">
                        {{ $row['ph_prom'] }}
                    </td>
                    <td class="text-center text-muted small">{{ $row['ph_min'] }} – {{ $row['ph_max'] }}</td>
                    <td class="text-center">
                        <div class="progress" style="height:18px">
                            <div class="progress-bar {{ $row['pct_aprobacion'] >= 80 ? 'bg-success' : ($row['pct_aprobacion'] >= 50 ? 'bg-warning' : 'bg-danger') }}"
                                 style="width:{{ $row['pct_aprobacion'] }}%">
                                {{ $row['pct_aprobacion'] }}%
                            </div>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@if($proveedor_id && $recepciones->isNotEmpty())
<div class="card">
    <div class="card-header py-2"><h3 class="card-title">Recepciones individuales del proveedor</h3></div>
    <div class="card-body p-0">
        <table class="table table-sm table-hover mb-0">
            <thead class="thead-dark">
                <tr>
                    <th>Fecha</th>
                    <th>N° Recepción</th>
                    <th class="text-center">Brix</th>
                    <th class="text-center">pH</th>
                    <th class="text-center">Resultado</th>
                </tr>
            </thead>
            <tbody>
                @foreach($recepciones as $r)
                @php
                    $bR = !$frutaSeleccionada || ($r->brix_promedio >= $frutaSeleccionada->brix_min && $r->brix_promedio <= $frutaSeleccionada->brix_max);
                    $pR = !$frutaSeleccionada || ($r->ph_promedio >= $frutaSeleccionada->ph_min && $r->ph_promedio <= $frutaSeleccionada->ph_max);
                    $colRes = ['liberado'=>'success','rechazado'=>'danger','liberado_con_obs'=>'warning'][$r->resultado] ?? 'secondary';
                    $lblRes = ['liberado'=>'Liberado','rechazado'=>'Rechazado','liberado_con_obs'=>'Lib. c/Obs'][$r->resultado] ?? $r->resultado;
                @endphp
                <tr>
                    <td>{{ \Carbon\Carbon::parse($r->fecha)->format('d/m/Y') }}</td>
                    <td>{{ $r->numero ?? '—' }}</td>
                    <td class="text-center font-weight-bold {{ $frutaSeleccionada ? ($bR ? 'text-success' : 'text-danger') : '' }}">{{ $r->brix_promedio }}</td>
                    <td class="text-center font-weight-bold {{ $frutaSeleccionada ? ($pR ? 'text-success' : 'text-danger') : '' }}">{{ $r->ph_promedio }}</td>
                    <td class="text-center"><span class="badge badge-{{ $colRes }}">{{ $lblRes }}</span></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif
@endif
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3/dist/chart.min.js"></script>
<script>
@if(!$recepciones->isEmpty())
new Chart(document.getElementById('chartBrix').getContext('2d'), {
    type: 'line',
    data: {
        labels: @json($serieTemporal->pluck('semana')),
        datasets: [
            { label: 'Brix Prom.', data: @json($serieTemporal->pluck('brix_prom')), borderColor:'#28a745', backgroundColor:'rgba(40,167,69,.08)', yAxisID:'yBrix', tension:0.3, pointRadius:4 },
            { label: 'pH Prom.',   data: @json($serieTemporal->pluck('ph_prom')),   borderColor:'#007bff', backgroundColor:'rgba(0,123,255,.08)',  yAxisID:'yPh',   tension:0.3, pointRadius:4, borderDash:[5,3] }
        ]
    },
    options: {
        responsive: true,
        plugins: { legend: { position:'top' } },
        scales: {
            yBrix: { type:'linear', position:'left',  title:{display:true,text:'Brix'} },
            yPh:   { type:'linear', position:'right', title:{display:true,text:'pH'}, grid:{drawOnChartArea:false} }
        }
    }
});
@endif
</script>
@endpush