@extends('layouts.app')
@section('title','Registrar Inspección de Plagas')
@section('page-title','Registrar Inspección de Plagas')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('bpm.dashboard') }}">BPM</a></li>
    <li class="breadcrumb-item"><a href="{{ route('bpm.inspeccion-plagas.index') }}">Inspección Plagas</a></li>
    <li class="breadcrumb-item active">Registrar</li>
@endsection
@section('content')

<form method="POST" action="{{ route('bpm.inspeccion-plagas.store') }}">
@csrf
<div class="card card-outline card-warning">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-bug mr-1"></i> FDS-CTP-01 — Inspección de Plagas por Turno</h3>
    </div>
    <div class="card-body">

        @if($errors->any())
        <div class="alert alert-danger py-2">
            <ul class="mb-0 pl-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
        @endif

        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label>Fecha <span class="text-danger">*</span></label>
                    <input type="date" name="fecha" value="{{ old('fecha', now()->format('Y-m-d')) }}"
                        class="form-control @error('fecha') is-invalid @enderror">
                    @error('fecha')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>Turno <span class="text-danger">*</span></label>
                    <select name="turno" class="form-control @error('turno') is-invalid @enderror">
                        <option value="">— Seleccionar —</option>
                        @foreach($turnos as $key => $label)
                        <option value="{{ $key }}" {{ old('turno') === $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                    @error('turno')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>

        <hr>
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h5 class="mb-0"><i class="fas fa-map-marker-alt mr-1 text-warning"></i> Áreas Inspeccionadas</h5>
            <button type="button" class="btn btn-sm btn-success" id="btn-add-area">
                <i class="fas fa-plus mr-1"></i>Agregar Área
            </button>
        </div>

        <div id="areas-container">
            <div class="area-row card border mb-2">
                <div class="card-body py-2 px-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <strong class="text-muted small">ÁREA #<span class="area-num">1</span></strong>
                        <button type="button" class="btn btn-xs btn-outline-danger remove-area" style="display:none;">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-2">
                                <label class="small">Área <span class="text-danger">*</span></label>
                                <select name="areas[0][area]" class="form-control form-control-sm area-select">
                                    <option value="">— Seleccionar —</option>
                                    @foreach($areas as $a)<option value="{{ $a }}">{{ $a }}</option>@endforeach
                                    <option value="__otro__">Otro...</option>
                                </select>
                                <input type="text" class="form-control form-control-sm mt-1 area-custom" placeholder="Especificar área..." style="display:none;">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-2">
                                <label class="small">Tipo de Plaga <span class="text-danger">*</span></label>
                                <select name="areas[0][tipo_plaga]" class="form-control form-control-sm">
                                    @foreach(\App\Models\BpmInspeccionPlagas::$TIPOS_PLAGA as $k => $v)
                                    <option value="{{ $k }}">{{ $v }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group mb-2">
                                <label class="small">Evidencia <span class="text-danger">*</span></label>
                                <select name="areas[0][evidencia]" class="form-control form-control-sm evidencia-select">
                                    @foreach(\App\Models\BpmInspeccionPlagas::$EVIDENCIAS as $k => $v)
                                    <option value="{{ $k }}">{{ $v }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 d-flex align-items-center">
                            <span class="badge badge-success evidencia-badge p-2">Sin evidencia</span>
                        </div>
                    </div>
                    <div class="accion-row" style="display:none;">
                        <div class="form-group mb-0">
                            <label class="small text-danger">Acción Tomada</label>
                            <textarea name="areas[0][accion_tomada]" rows="2" class="form-control form-control-sm"
                                placeholder="Describa la acción inmediata tomada..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="alert alert-info py-2 mt-2 mb-0 small">
            <i class="fas fa-info-circle mr-1"></i>
            Si se detecta <strong>Presencia Activa</strong> se generará automáticamente una Acción Correctiva.
        </div>
    </div>
    <div class="card-footer d-flex">
        <button type="submit" class="btn btn-warning mr-2"><i class="fas fa-save mr-1"></i>Guardar Inspección</button>
        <a href="{{ route('bpm.inspeccion-plagas.index') }}" class="btn btn-secondary">Cancelar</a>
    </div>
</div>
</form>

@push('scripts')
<script>
const AREAS_LIST   = @json($areas);
const TIPOS_PLAGA  = @json(\App\Models\BpmInspeccionPlagas::$TIPOS_PLAGA);
const EVIDENCIAS   = @json(\App\Models\BpmInspeccionPlagas::$EVIDENCIAS);

function buildAreaRow(idx) {
    let aOpts = '<option value="">— Seleccionar —</option>';
    AREAS_LIST.forEach(a => aOpts += `<option value="${a}">${a}</option>`);
    aOpts += '<option value="__otro__">Otro...</option>';

    let tOpts = Object.entries(TIPOS_PLAGA).map(([k,v]) => `<option value="${k}">${v}</option>`).join('');
    let eOpts = Object.entries(EVIDENCIAS).map(([k,v]) => `<option value="${k}">${v}</option>`).join('');

    return `
    <div class="area-row card border mb-2">
      <div class="card-body py-2 px-3">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <strong class="text-muted small">ÁREA #<span class="area-num">${idx+1}</span></strong>
          <button type="button" class="btn btn-xs btn-outline-danger remove-area"><i class="fas fa-times"></i></button>
        </div>
        <div class="row">
          <div class="col-md-4"><div class="form-group mb-2">
            <label class="small">Área <span class="text-danger">*</span></label>
            <select name="areas[${idx}][area]" class="form-control form-control-sm area-select">${aOpts}</select>
            <input type="text" class="form-control form-control-sm mt-1 area-custom" placeholder="Especificar área..." style="display:none;">
          </div></div>
          <div class="col-md-3"><div class="form-group mb-2">
            <label class="small">Tipo de Plaga <span class="text-danger">*</span></label>
            <select name="areas[${idx}][tipo_plaga]" class="form-control form-control-sm">${tOpts}</select>
          </div></div>
          <div class="col-md-3"><div class="form-group mb-2">
            <label class="small">Evidencia <span class="text-danger">*</span></label>
            <select name="areas[${idx}][evidencia]" class="form-control form-control-sm evidencia-select">${eOpts}</select>
          </div></div>
          <div class="col-md-2 d-flex align-items-center">
            <span class="badge badge-success evidencia-badge p-2">Sin evidencia</span>
          </div>
        </div>
        <div class="accion-row" style="display:none;">
          <div class="form-group mb-0">
            <label class="small text-danger">Acción Tomada</label>
            <textarea name="areas[${idx}][accion_tomada]" rows="2" class="form-control form-control-sm" placeholder="Describa la acción inmediata tomada..."></textarea>
          </div>
        </div>
      </div>
    </div>`;
}

function reindex() {
    document.querySelectorAll('.area-row').forEach((row, i) => {
        row.querySelector('.area-num').textContent = i + 1;
        row.querySelectorAll('[name]').forEach(el => {
            el.name = el.name.replace(/areas\[\d+\]/, `areas[${i}]`);
        });
        const removeBtn = row.querySelector('.remove-area');
        removeBtn.style.display = document.querySelectorAll('.area-row').length > 1 ? '' : 'none';
    });
}

document.getElementById('btn-add-area').addEventListener('click', function() {
    const idx = document.querySelectorAll('.area-row').length;
    document.getElementById('areas-container').insertAdjacentHTML('beforeend', buildAreaRow(idx));
    bindRow(document.querySelectorAll('.area-row')[idx]);
    reindex();
});

function bindRow(row) {
    row.querySelector('.evidencia-select').addEventListener('change', function() {
        const badge = row.querySelector('.evidencia-badge');
        const accion = row.querySelector('.accion-row');
        const v = this.value;
        if (v === 'ninguna') {
            badge.className = 'badge badge-success evidencia-badge p-2';
            badge.textContent = 'Sin evidencia';
            accion.style.display = 'none';
        } else if (v === 'indicios') {
            badge.className = 'badge badge-warning evidencia-badge p-2';
            badge.textContent = 'Indicios';
            accion.style.display = 'block';
        } else {
            badge.className = 'badge badge-danger evidencia-badge p-2';
            badge.textContent = '⚠️ Presencia activa';
            accion.style.display = 'block';
        }
    });

    row.querySelector('.area-select').addEventListener('change', function() {
        const custom = row.querySelector('.area-custom');
        if (this.value === '__otro__') {
            custom.style.display = '';
            this.name = '';
            custom.name = `areas[0][area]`; // will be reindexed
        } else {
            custom.style.display = 'none';
            if (!this.name) this.name = custom.name;
            custom.name = '';
        }
        reindex();
    });

    row.querySelector('.remove-area').addEventListener('click', function() {
        row.remove();
        reindex();
    });
}

// Bind first row
bindRow(document.querySelector('.area-row'));
</script>
@endpush
@endsection