@extends('layouts.app')
@section('title', 'Nueva Recepción MP')
@section('page-title', 'Nueva Recepción de Materia Prima')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('calidad.dashboard') }}">Calidad</a></li>
    <li class="breadcrumb-item"><a href="{{ route('calidad.recepciones.index') }}">Recepciones MP</a></li>
    <li class="breadcrumb-item active">Nueva</li>
@endsection
@section('content')

<form action="{{ route('calidad.recepciones.store') }}" method="POST" id="form-recepcion">
@csrf

@if($errors->any())<div class="alert alert-danger">{{ $errors->first() }}</div>@endif

{{-- ── DATOS DE LA RECEPCIÓN ───────────────────────────────────────────────── --}}
<div class="card card-outline card-info">
    <div class="card-header"><h3 class="card-title"><i class="fas fa-truck-loading mr-1"></i> Datos de la Recepción</h3></div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label>Fruta <span class="text-danger">*</span></label>
                    <select id="fruta_id" name="fruta_id" class="form-control" required onchange="onFrutaChange()">
                        <option value="">— Seleccionar —</option>
                        @foreach($frutas as $f)
                        <option value="{{ $f->id }}"
                                data-nombre="{{ $f->nombre }}"
                                data-prefix="{{ strtoupper(substr(preg_replace('/[^a-zA-Z]/', '', $f->nombre), 0, 3)) }}"
                                data-brix-min="{{ $f->brix_min }}" data-brix-max="{{ $f->brix_max }}"
                                data-ph-min="{{ $f->ph_min }}"     data-ph-max="{{ $f->ph_max }}"
                                {{ old('fruta_id') == $f->id ? 'selected' : '' }}>
                            {{ $f->nombre }}
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>Proveedor <span class="text-danger">*</span></label>
                    <select name="proveedor_id" class="form-control" required>
                        <option value="">— Seleccionar —</option>
                        @foreach($proveedores as $p)
                        <option value="{{ $p->id }}" {{ old('proveedor_id')==$p->id?'selected':'' }}>{{ $p->razon_social }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>Fecha <span class="text-danger">*</span></label>
                    <input type="date" name="fecha" class="form-control" value="{{ old('fecha', today()->toDateString()) }}" required>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>Kg Recibidos <span class="text-danger">*</span></label>
                    <input type="number" name="kg_recibidos" id="kg_recibidos" step="0.001" min="0.001" class="form-control"
                           value="{{ old('kg_recibidos') }}" required>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>T° Recepción (°C)</label>
                    <input type="number" name="temperatura_recepcion" step="0.1" class="form-control"
                           value="{{ old('temperatura_recepcion') }}">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <label>Apariencia <span class="text-danger">*</span></label>
                    <select name="apariencia" class="form-control" required>
                        <option value="buena"   {{ old('apariencia','buena')=='buena'?'selected':'' }}>Buena</option>
                        <option value="regular" {{ old('apariencia')=='regular'?'selected':'' }}>Regular</option>
                        <option value="mala"    {{ old('apariencia')=='mala'?'selected':'' }}>Mala</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label>Resultado <span class="text-danger">*</span></label>
                    <select name="resultado" class="form-control" required>
                        <option value="liberado"   {{ old('resultado','liberado')=='liberado'?'selected':'' }}>LIBERADO</option>
                        <option value="cuarentena" {{ old('resultado')=='cuarentena'?'selected':'' }}>CUARENTENA</option>
                        <option value="rechazado"  {{ old('resultado')=='rechazado'?'selected':'' }}>RECHAZADO</option>
                    </select>
                </div>
            </div>
            <div class="col-md-8">
                <div class="form-group">
                    <label>Observaciones</label>
                    <input type="text" name="observaciones" class="form-control" value="{{ old('observaciones') }}" maxlength="500">
                </div>
            </div>
        </div>

        <div id="rangosRef" class="alert alert-info py-2 mb-0 d-none">
            <i class="fas fa-chart-bar mr-1"></i>
            <strong>Rangos aceptables para <span id="refFrutaNombre">—</span>:</strong>
            &nbsp; Brix: <strong><span id="refBrix">—</span>°</strong>
            &nbsp;|&nbsp; pH: <strong><span id="refPh">—</span></strong>
        </div>
    </div>
</div>

{{-- ── LOTE DE MATERIA PRIMA ────────────────────────────────────────────────── --}}
<div class="card card-outline card-primary">
    <div class="card-header"><h3 class="card-title"><i class="fas fa-tag mr-1"></i> Lote de Materia Prima</h3></div>
    <div class="card-body">

        <div class="row mb-3">
            <div class="col-md-12">
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="lote_nuevo" name="lote_accion" value="nuevo"
                           class="custom-control-input" {{ old('lote_accion','nuevo')==='nuevo'?'checked':'' }}
                           onchange="toggleLoteMode('nuevo')">
                    <label class="custom-control-label" for="lote_nuevo">
                        <strong><i class="fas fa-plus-circle text-primary mr-1"></i> Crear nuevo lote MP</strong>
                        <small class="text-muted d-block">Se generará automáticamente el código al guardar</small>
                    </label>
                </div>
                <div class="custom-control custom-radio custom-control-inline ml-4">
                    <input type="radio" id="lote_existente" name="lote_accion" value="existente"
                           class="custom-control-input" {{ old('lote_accion')==='existente'?'checked':'' }}
                           onchange="toggleLoteMode('existente')">
                    <label class="custom-control-label" for="lote_existente">
                        <strong><i class="fas fa-link text-warning mr-1"></i> Agregar a lote existente</strong>
                        <small class="text-muted d-block">Esta recepción es una continuación de un lote ya abierto</small>
                    </label>
                </div>
            </div>
        </div>

        {{-- Modo NUEVO: preview del código que se generará --}}
        <div id="seccion-lote-nuevo" class="{{ old('lote_accion')==='existente' ? 'd-none' : '' }}">
            <div class="alert alert-primary py-2 mb-0">
                <i class="fas fa-info-circle mr-1"></i>
                Se creará un lote con código <strong id="preview-codigo-lote">— (selecciona la fruta primero)</strong>
                vinculado a esta recepción. Los kg recibidos se asignarán al stock del lote.
            </div>
        </div>

        {{-- Modo EXISTENTE: dropdown solo con lotes MP de la fruta seleccionada --}}
        <div id="seccion-lote-existente" class="{{ old('lote_accion')==='existente' ? '' : 'd-none' }}">
            <div class="form-group mb-0">
                <label>Seleccionar lote MP existente</label>
                <select name="lote_id" id="lote_id_select" class="form-control">
                    <option value="">— Selecciona la fruta primero —</option>
                    @foreach($lotesMP as $l)
                    <option value="{{ $l->id }}"
                            data-fruta="{{ $l->fruta_id }}"
                            {{ old('lote_id')==$l->id?'selected':'' }}>
                        {{ $l->numero }} — {{ $l->fruta->nombre ?? '—' }}
                        — {{ number_format($l->cantidad_actual, 0) }} kg disponibles
                        — {{ ucfirst($l->estado) }}
                    </option>
                    @endforeach
                </select>
                <small class="text-muted">Solo se muestran lotes MP vigentes. Los kg recibidos se sumarán al stock del lote seleccionado.</small>
            </div>
        </div>
    </div>
</div>

{{-- ── MUESTRAS ────────────────────────────────────────────────────────────── --}}
<div class="card card-outline card-warning">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title"><i class="fas fa-flask mr-1"></i> Muestras — Brix y pH (mínimo 3)</h3>
        <button type="button" id="addMuestra" class="btn btn-sm btn-outline-warning"><i class="fas fa-plus mr-1"></i> Agregar muestra</button>
    </div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0" id="tblMuestras">
            <thead class="thead-dark">
                <tr><th width="40">#</th><th>Brix (°)</th><th>pH</th><th>Observación</th><th width="40"></th></tr>
            </thead>
            <tbody id="muestrasBody">
                @for($i = 0; $i < 3; $i++)
                <tr>
                    <td class="text-center">{{ $i+1 }}</td>
                    <td><input type="number" name="muestras[{{ $i }}][brix]" step="0.01" min="0" class="form-control form-control-sm brix-input" value="{{ old("muestras.{$i}.brix") }}" required></td>
                    <td><input type="number" name="muestras[{{ $i }}][ph]"   step="0.01" min="0" max="14" class="form-control form-control-sm ph-input" value="{{ old("muestras.{$i}.ph") }}" required></td>
                    <td><input type="text"   name="muestras[{{ $i }}][observacion]" class="form-control form-control-sm" value="{{ old("muestras.{$i}.observacion") }}" maxlength="255"></td>
                    <td class="text-center text-muted">—</td>
                </tr>
                @endfor
            </tbody>
        </table>
    </div>
    <div class="card-footer d-flex justify-content-between">
        <a href="{{ route('calidad.recepciones.index') }}" class="btn btn-secondary">Cancelar</a>
        <button type="submit" class="btn btn-info"><i class="fas fa-save mr-1"></i> Registrar Recepción</button>
    </div>
</div>

</form>

@php
$lotesMpJs = $lotesMP->map(function($l) {
    return [
        'id'       => $l->id,
        'numero'   => $l->numero,
        'fruta_id' => $l->fruta_id,
        'nombre'   => $l->fruta->nombre ?? '—',
        'kg'       => number_format($l->cantidad_actual, 0, '.', ','),
        'estado'   => ucfirst($l->estado),
    ];
})->values();
@endphp

@push('scripts')
<script>
const lotesMP = @json($lotesMpJs);

let muestraIdx = 3;
let brixMin = null, brixMax = null, phMin = null, phMax = null;

function onFrutaChange() {
    const sel  = document.getElementById('fruta_id');
    const opt  = sel.options[sel.selectedIndex];
    const fId  = parseInt(sel.value);

    if (opt.value) {
        // Rangos
        brixMin = parseFloat(opt.dataset.brixMin);
        brixMax = parseFloat(opt.dataset.brixMax);
        phMin   = parseFloat(opt.dataset.phMin);
        phMax   = parseFloat(opt.dataset.phMax);
        document.getElementById('rangosRef').classList.remove('d-none');
        document.getElementById('refFrutaNombre').textContent = opt.dataset.nombre;
        document.getElementById('refBrix').textContent = opt.dataset.brixMin + '° – ' + opt.dataset.brixMax + '°';
        document.getElementById('refPh').textContent   = opt.dataset.phMin + ' – ' + opt.dataset.phMax;

        // Preview código lote
        const prefix = opt.dataset.prefix;
        const hoy    = new Date();
        const ymd    = hoy.getFullYear() + String(hoy.getMonth()+1).padStart(2,'0') + String(hoy.getDate()).padStart(2,'0');
        document.getElementById('preview-codigo-lote').textContent = prefix + '-' + ymd + '-###';

        // Filtrar dropdown lote existente
        filtrarLotesExistentes(fId);
    } else {
        brixMin = brixMax = phMin = phMax = null;
        document.getElementById('rangosRef').classList.add('d-none');
        document.getElementById('preview-codigo-lote').textContent = '— (selecciona la fruta primero)';
        resetLotesExistentes();
    }
    colorearMuestras();
}

function filtrarLotesExistentes(frutaId) {
    const sel = document.getElementById('lote_id_select');
    sel.innerHTML = '<option value="">— Sin lotes MP registrados para esta fruta —</option>';
    const filtrados = lotesMP.filter(l => l.fruta_id === frutaId);
    filtrados.forEach(l => {
        const opt = document.createElement('option');
        opt.value = l.id;
        opt.textContent = l.numero + ' — ' + l.nombre + ' — ' + l.kg + ' kg — ' + l.estado;
        sel.appendChild(opt);
    });
    if (filtrados.length === 0) {
        sel.innerHTML = '<option value="">No hay lotes MP abiertos para esta fruta</option>';
    }
}

function resetLotesExistentes() {
    document.getElementById('lote_id_select').innerHTML = '<option value="">— Selecciona la fruta primero —</option>';
}

function toggleLoteMode(mode) {
    document.getElementById('seccion-lote-nuevo').classList.toggle('d-none', mode !== 'nuevo');
    document.getElementById('seccion-lote-existente').classList.toggle('d-none', mode !== 'existente');
}

// Colorear celdas Brix/pH según rangos
function colorearMuestras() {
    document.querySelectorAll('.brix-input').forEach(inp => {
        const val = parseFloat(inp.value);
        if (!isNaN(val) && brixMin !== null) {
            inp.style.background = (val >= brixMin && val <= brixMax) ? '#d4edda' : '#f8d7da';
        } else {
            inp.style.background = '';
        }
    });
    document.querySelectorAll('.ph-input').forEach(inp => {
        const val = parseFloat(inp.value);
        if (!isNaN(val) && phMin !== null) {
            inp.style.background = (val >= phMin && val <= phMax) ? '#d4edda' : '#f8d7da';
        } else {
            inp.style.background = '';
        }
    });
}

// Escuchar cambios en muestras para colorear
document.getElementById('muestrasBody').addEventListener('input', colorearMuestras);

// Agregar muestra
document.getElementById('addMuestra').addEventListener('click', function() {
    const tbody = document.getElementById('muestrasBody');
    const tr    = document.createElement('tr');
    tr.innerHTML = `<td class="text-center">${muestraIdx+1}</td>
        <td><input type="number" name="muestras[${muestraIdx}][brix]" step="0.01" min="0" class="form-control form-control-sm brix-input" required></td>
        <td><input type="number" name="muestras[${muestraIdx}][ph]"   step="0.01" min="0" max="14" class="form-control form-control-sm ph-input" required></td>
        <td><input type="text"   name="muestras[${muestraIdx}][observacion]" class="form-control form-control-sm" maxlength="255"></td>
        <td class="text-center"><button type="button" class="btn btn-xs btn-danger removeMuestra"><i class="fas fa-times"></i></button></td>`;
    tbody.appendChild(tr);
    muestraIdx++;
});

document.getElementById('muestrasBody').addEventListener('click', function(e) {
    if (e.target.closest('.removeMuestra')) e.target.closest('tr').remove();
});

// Init si hay valor old
const initFrutaId = parseInt(document.getElementById('fruta_id').value);
if (initFrutaId) {
    document.getElementById('fruta_id').dispatchEvent(new Event('change'));
}
</script>
@endpush
@endsection