@extends('layouts.app')
@section('title', 'OT: ' . $orden->codigo)
@section('page-title', 'Orden de Trabajo')

@section('content')

{{-- Header --}}
<div class="card mb-3">
    <div class="card-body py-3">
        <div class="d-flex justify-content-between align-items-center flex-wrap" style="gap:10px;">
            <div>
                <h4 class="mb-1" style="color:#2E7D32;">
                    <i class="fas fa-clipboard-list mr-2"></i>{{ $orden->codigo }}
                </h4>
                <span class="badge badge-dark mr-1">{{ \App\Models\MantenimientoOrden::$AREAS_TRABAJO[$orden->area_trabajo] ?? ucfirst($orden->area_trabajo) }}</span>
                <span class="badge badge-info mr-1">{{ \App\Models\MantenimientoOrden::$TIPOS[$orden->tipo] ?? ucfirst($orden->tipo) }}</span>
                <span class="badge badge-{{ $orden->badge_prioridad }} mr-1">{{ \App\Models\MantenimientoOrden::$PRIORIDADES[$orden->prioridad] ?? ucfirst($orden->prioridad) }}</span>
                <span class="badge badge-{{ $orden->badge_estado }}">{{ \App\Models\MantenimientoOrden::$ESTADOS[$orden->estado] ?? ucfirst($orden->estado) }}</span>
            </div>
            <div class="d-flex flex-wrap" style="gap:8px;">
                <a href="{{ route('mantenimiento.ordenes.pdf', $orden) }}" class="btn btn-danger btn-sm" target="_blank">
                    <i class="fas fa-file-pdf mr-1"></i> PDF
                </a>
                @if(in_array($orden->estado, ['pendiente','en_proceso']))
                <a href="{{ route('mantenimiento.ordenes.edit', $orden) }}" class="btn btn-secondary btn-sm">
                    <i class="fas fa-edit mr-1"></i> Editar
                </a>
                @endif
                @if($orden->estado === 'pendiente')
                    <form action="{{ route('mantenimiento.ordenes.iniciar', $orden) }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-success btn-sm" onclick="return confirm('¿Iniciar esta orden de trabajo?')">
                            <i class="fas fa-play mr-1"></i> Iniciar
                        </button>
                    </form>
                    <form action="{{ route('mantenimiento.ordenes.cancelar', $orden) }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('¿Cancelar esta OT?')">
                            <i class="fas fa-ban mr-1"></i> Cancelar
                        </button>
                    </form>
                @endif
                @if($orden->estado === 'en_proceso')
                    <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#modalCompletar">
                        <i class="fas fa-check mr-1"></i> Completar OT
                    </button>
                    <form action="{{ route('mantenimiento.ordenes.cancelar', $orden) }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('¿Cancelar esta orden de trabajo?')">
                            <i class="fas fa-ban mr-1"></i> Cancelar
                        </button>
                    </form>
                @endif
            </div>
        </div>
    </div>
</div>

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show"><i class="fas fa-check-circle mr-2"></i>{{ session('success') }}<button type="button" class="close" data-dismiss="alert"><span>&times;</span></button></div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show"><i class="fas fa-exclamation-triangle mr-2"></i>{!! session('error') !!}<button type="button" class="close" data-dismiss="alert"><span>&times;</span></button></div>
@endif

{{-- KPIs --}}
@php
    $costoTotal  = (float)($orden->costo_repuestos ?? 0);
    $tiempoMin   = $orden->tiempo_intervencion_min;
    $paroMin     = $orden->paro_minutos;
    $reqCount    = $orden->requerimientos->count();
    $reqEntregados = $orden->requerimientos->where('estado','entregado')->count();
@endphp
<div class="row mb-2">
    <div class="col-6 col-md-3">
        <div class="info-box mb-3">
            <span class="info-box-icon" style="background:#2E7D32;"><i class="fas fa-clock"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">T. Intervención</span>
                <span class="info-box-number">{{ $tiempoMin ? $tiempoMin.' min' : '—' }}</span>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="info-box mb-3">
            <span class="info-box-icon" style="background:#388E3C;"><i class="fas fa-dollar-sign"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Costo Repuestos</span>
                <span class="info-box-number">S/. {{ number_format($costoTotal, 2) }}</span>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="info-box mb-3">
            <span class="info-box-icon {{ $paroMin ? 'bg-danger' : 'bg-secondary' }}"><i class="fas fa-stop-circle"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Paro de Máquina</span>
                <span class="info-box-number">{{ $paroMin ? $paroMin.' min' : 'Sin paro' }}</span>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="info-box mb-3">
            <span class="info-box-icon" style="background:#1B5E20;"><i class="fas fa-boxes"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Requerimientos</span>
                <span class="info-box-number">{{ $reqEntregados }}/{{ $reqCount }} entregados</span>
            </div>
        </div>
    </div>
</div>

<div class="row">
    {{-- Datos generales --}}
    <div class="col-md-7">
        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-info-circle mr-1"></i> Datos de la Orden</h3></div>
            <div class="card-body">

                {{-- Descripción prominente --}}
                @if($orden->descripcion)
                <div class="mb-3 p-3 rounded" style="background:rgba(46,125,50,.15);border-left:3px solid #388E3C;">
                    <p class="text-white-50 small mb-1">Descripción del trabajo</p>
                    <p class="text-white mb-0">{{ $orden->descripcion }}</p>
                </div>
                @endif

                <dl class="row mb-0">
                    <dt class="col-sm-5 text-white-50">Equipo</dt>
                    <dd class="col-sm-7 text-white">
                        @if($orden->equipo)
                            <a href="{{ route('mantenimiento.equipos.show', $orden->equipo) }}" class="text-warning">
                                <i class="fas fa-cog mr-1"></i>{{ $orden->equipo->nombre }}
                            </a>
                            @if($orden->equipo->ubicacion)
                            <br><small class="text-white-50">{{ $orden->equipo->ubicacion }}</small>
                            @endif
                        @else —
                        @endif
                    </dd>

                    <dt class="col-sm-5 text-white-50">Área</dt>
                    <dd class="col-sm-7">
                        <span class="badge badge-dark">{{ \App\Models\MantenimientoOrden::$AREAS_TRABAJO[$orden->area_trabajo] ?? '—' }}</span>
                    </dd>

                    <dt class="col-sm-5 text-white-50">Tipo</dt>
                    <dd class="col-sm-7 text-white">{{ \App\Models\MantenimientoOrden::$TIPOS[$orden->tipo] ?? ucfirst($orden->tipo) }}</dd>

                    <dt class="col-sm-5 text-white-50">Prioridad</dt>
                    <dd class="col-sm-7">
                        <span class="badge badge-{{ $orden->badge_prioridad }}">{{ \App\Models\MantenimientoOrden::$PRIORIDADES[$orden->prioridad] ?? ucfirst($orden->prioridad) }}</span>
                    </dd>

                    <dt class="col-sm-5 text-white-50">Técnico asignado</dt>
                    <dd class="col-sm-7 text-white">
                        <i class="fas fa-user mr-1 text-white-50"></i>{{ $orden->tecnico?->name ?? '— Sin asignar —' }}
                    </dd>

                    <dt class="col-sm-5 text-white-50">Creado por</dt>
                    <dd class="col-sm-7 text-white-50 small">{{ $orden->creadoPor?->name ?? '—' }}</dd>

                    @if($orden->solicitud)
                    <dt class="col-sm-5 text-white-50">Solicitud origen</dt>
                    <dd class="col-sm-7">
                        <a href="{{ route('mantenimiento.solicitudes.show', $orden->solicitud) }}" class="btn btn-xs btn-outline-warning">
                            <i class="fas fa-bell mr-1"></i>{{ $orden->solicitud->codigo }}
                        </a>
                    </dd>
                    @endif

                    @if($orden->observaciones)
                    <dt class="col-sm-5 text-white-50">Observaciones</dt>
                    <dd class="col-sm-7 text-white small">{{ $orden->observaciones }}</dd>
                    @endif
                </dl>
            </div>
        </div>
    </div>

    {{-- Tiempos + Paro --}}
    <div class="col-md-5">
        {{-- Tiempos --}}
        <div class="card">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-calendar-alt mr-1"></i> Tiempos</h3></div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-6 text-white-50">Fecha prog.</dt>
                    <dd class="col-6 text-white">{{ $orden->fecha_programada?->format('d/m/Y') ?? '—' }}</dd>

                    <dt class="col-6 text-white-50">Hora inicio</dt>
                    <dd class="col-6 text-white">
                        {{ $orden->hora_inicio ? \Carbon\Carbon::parse($orden->hora_inicio)->format('H:i') : '—' }}
                    </dd>

                    <dt class="col-6 text-white-50">Hora fin</dt>
                    <dd class="col-6 text-white">
                        {{ $orden->hora_fin ? \Carbon\Carbon::parse($orden->hora_fin)->format('H:i') : '—' }}
                    </dd>

                    @if($tiempoMin)
                    <dt class="col-6 text-white-50">Duración</dt>
                    <dd class="col-6">
                        <strong style="color:#A5D6A7;">
                            {{ floor($tiempoMin/60) > 0 ? floor($tiempoMin/60).'h ' : '' }}{{ $tiempoMin % 60 }}min
                        </strong>
                    </dd>
                    @endif
                </dl>
            </div>
        </div>

        {{-- Paro de máquina --}}
        @if($orden->paro_maquina)
        <div class="card" style="border:1px solid #ef5350;">
            <div class="card-header bg-danger">
                <h3 class="card-title text-white"><i class="fas fa-stop-circle mr-1"></i> Paro de Máquina</h3>
            </div>
            <div class="card-body">
                <dl class="row mb-0">
                    <dt class="col-6 text-white-50">Motivo</dt>
                    <dd class="col-6 text-white small">{{ $orden->paro_motivo ?? '—' }}</dd>
                    <dt class="col-6 text-white-50">Inicio</dt>
                    <dd class="col-6 text-white">{{ $orden->paro_inicio ? \Carbon\Carbon::parse($orden->paro_inicio)->format('H:i') : '—' }}</dd>
                    <dt class="col-6 text-white-50">Fin</dt>
                    <dd class="col-6 text-white">{{ $orden->paro_fin ? \Carbon\Carbon::parse($orden->paro_fin)->format('H:i') : '—' }}</dd>
                    <dt class="col-6 text-white-50">Duración</dt>
                    <dd class="col-6"><strong class="text-warning">{{ $paroMin ? $paroMin.' min' : '—' }}</strong></dd>
                </dl>
            </div>
        </div>
        @endif
    </div>
</div>

{{-- Costo desglosado por repuestos entregados --}}
@if($movimientosCosto->count() > 0)
<div class="card">
    <div class="card-header" style="background:#1B5E20;">
        <h3 class="card-title text-white"><i class="fas fa-dollar-sign mr-2"></i> Costo de Repuestos Utilizados</h3>
    </div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0">
            <thead>
                <tr style="border-bottom:2px solid #388E3C;">
                    <th style="border:none;color:#A5D6A7;">Material / Repuesto</th>
                    <th style="border:none;color:#A5D6A7;text-align:right;">Cantidad</th>
                    <th style="border:none;color:#A5D6A7;text-align:right;">Costo (S/.)</th>
                </tr>
            </thead>
            <tbody>
                @foreach($movimientosCosto as $mov)
                <tr>
                    <td style="border-bottom:1px solid rgba(255,255,255,.08);border-top:none;border-left:none;border-right:none;">
                        {{ $mov['nombre'] }}
                    </td>
                    <td style="border-bottom:1px solid rgba(255,255,255,.08);border-top:none;border-left:none;border-right:none;text-align:right;">
                        {{ number_format($mov['cantidad'], 3) }} {{ $mov['unidad'] }}
                    </td>
                    <td style="border-bottom:1px solid rgba(255,255,255,.08);border-top:none;border-left:none;border-right:none;text-align:right;font-weight:bold;color:#A5D6A7;">
                        S/. {{ number_format($mov['costo'], 2) }}
                    </td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr style="background:rgba(46,125,50,.2);">
                    <td colspan="2" style="border:none;text-align:right;font-weight:bold;color:#fff;">Total costo repuestos:</td>
                    <td style="border:none;text-align:right;font-weight:bold;font-size:1.1em;color:#A5D6A7;">
                        S/. {{ number_format($costoTotal, 2) }}
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
@endif

{{-- ═══ CONSULTA DE STOCK (siempre visible) ═══ --}}
<div class="card">
    <div class="card-header" style="background:#2E7D32;">
        <h3 class="card-title text-white"><i class="fas fa-warehouse mr-2"></i> Consultar Stock de Repuestos</h3>
    </div>
    <div class="card-body">

        {{-- Buscador de texto --}}
        <div class="row mb-3">
            <div class="col-md-7">
                <label class="text-white-50 small mb-1">Buscar producto por nombre o código</label>
                <div class="position-relative">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" style="background:#1B5E20;border-color:#388E3C;color:#A5D6A7;">
                                <i class="fas fa-search"></i>
                            </span>
                        </div>
                        <input type="text" id="inputBuscarStock" class="form-control"
                               placeholder="Escribe nombre o código del repuesto..." autocomplete="off"
                               style="border-color:#388E3C;background:#1e2a1e;color:#fff;">
                    </div>
                    <div id="dropdownStock"
                         style="display:none;position:absolute;top:100%;left:0;right:0;z-index:1050;
                                background:#263226;border:1px solid #388E3C;border-top:none;
                                border-radius:0 0 6px 6px;max-height:240px;overflow-y:auto;">
                    </div>
                </div>
                <div id="stockProductoElegido" style="display:none;margin-top:8px;">
                    <span style="color:#A5D6A7;font-weight:600;" id="stockNomElegido"></span>
                    <button type="button" id="btnCambiarStock" class="btn btn-xs btn-link" style="color:#888;">
                        <i class="fas fa-times mr-1"></i>cambiar
                    </button>
                </div>
            </div>
            <div class="col-md-5 mt-2 mt-md-0" id="stockResumenRapido" style="display:none;">
                <div class="d-flex" style="gap:8px;height:100%;align-items:center;">
                    <div class="flex-fill text-center p-2 rounded" style="background:rgba(46,125,50,.3);border:1px solid #388E3C;">
                        <div class="small text-white-50">Stock total</div>
                        <div class="font-weight-bold" style="color:#A5D6A7;font-size:1.1em;" id="rqStockTotal">—</div>
                    </div>
                    <div class="flex-fill text-center p-2 rounded" style="background:rgba(255,255,255,.07);border:1px solid #555;">
                        <div class="small text-white-50">Stock mínimo</div>
                        <div class="font-weight-bold text-white" id="rqStockMin">—</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Spinner --}}
        <div id="rqCargando" class="text-center py-3" style="display:none;">
            <i class="fas fa-spinner fa-spin fa-2x" style="color:#4CAF50;"></i>
            <p class="text-white-50 mt-2 mb-0">Consultando inventario...</p>
        </div>

        {{-- Tabla de lotes --}}
        <div id="rqTablaWrap" style="display:none;">
            <table class="table table-sm mb-0">
                <thead>
                    <tr style="border-bottom:2px solid #388E3C;">
                        <th style="border:none;color:#A5D6A7;">N° Lote</th>
                        <th style="border:none;color:#A5D6A7;">Almacén</th>
                        <th style="border:none;color:#A5D6A7;text-align:right;">Cantidad disponible</th>
                        <th style="border:none;color:#A5D6A7;">Vencimiento</th>
                        <th style="border:none;color:#A5D6A7;text-align:center;">Estado</th>
                        @if(in_array($orden->estado, ['pendiente','en_proceso']))
                        <th style="border:none;color:#A5D6A7;text-align:center;">Usar</th>
                        @endif
                    </tr>
                </thead>
                <tbody id="rqTbodyLotes"></tbody>
            </table>
        </div>

        {{-- Sin stock --}}
        <div id="rqVacio" class="text-center py-3" style="display:none;">
            <i class="fas fa-box-open fa-2x text-muted mb-2"></i>
            <p class="text-white-50 mb-1">Sin stock disponible en almacén para este producto.</p>
            <p class="text-warning small mb-0">Puede solicitarlo igual; Logística lo gestionará.</p>
        </div>

        {{-- Placeholder --}}
        <div id="rqPlaceholder" class="text-center py-4" style="color:#555;">
            <i class="fas fa-search fa-2x mb-2"></i>
            <p class="mb-0 small">Escribe el nombre o código del repuesto para ver el stock disponible en almacén.</p>
        </div>
    </div>
</div>

{{-- ═══ SOLICITAR REPUESTOS A LOGÍSTICA ═══ --}}
@if(in_array($orden->estado, ['pendiente','en_proceso']))
<div class="card" id="cardSolicitarRep">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title"><i class="fas fa-paper-plane mr-1"></i> Solicitar Repuestos a Logística</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('mantenimiento.ordenes.solicitar-repuestos', $orden) }}" method="POST" id="formRepuestos">
            @csrf
            <div class="form-group">
                <label class="text-white-50 small">Descripción / Motivo</label>
                <input type="text" name="descripcion" class="form-control form-control-sm"
                       placeholder="Ej: Repuestos para cambio de correa bomba N°2">
            </div>

            <div class="table-responsive mb-3">
                <table class="table table-sm mb-0">
                    <thead>
                        <tr style="border-bottom:2px solid #388E3C;">
                            <th style="border:none;color:#A5D6A7;width:48%;">Producto / Repuesto</th>
                            <th style="border:none;color:#A5D6A7;width:14%;">Stock</th>
                            <th style="border:none;color:#A5D6A7;width:28%;">Cantidad a pedir</th>
                            <th style="border:none;color:#A5D6A7;width:10%;text-align:center;">Quitar</th>
                        </tr>
                    </thead>
                    <tbody id="itemsRepBody">
                        <tr class="fila-item">
                            <td style="border-bottom:1px solid rgba(255,255,255,.1);border-top:none;border-left:none;border-right:none;position:relative;">
                                <input type="text" class="form-control form-control-sm inp-buscar-prod" placeholder="Buscar producto..." autocomplete="off">
                                <input type="hidden" name="items[0][producto_id]" class="inp-pid" required>
                                <div class="dropdown-prod" style="display:none;position:absolute;left:0;right:0;top:100%;z-index:1050;background:#263226;border:1px solid #388E3C;border-top:none;border-radius:0 0 4px 4px;max-height:180px;overflow-y:auto;"></div>
                            </td>
                            <td style="border-bottom:1px solid rgba(255,255,255,.1);border-top:none;border-left:none;border-right:none;">
                                <span class="badge badge-secondary stock-badge">—</span>
                            </td>
                            <td style="border-bottom:1px solid rgba(255,255,255,.1);border-top:none;border-left:none;border-right:none;">
                                <div class="input-group input-group-sm">
                                    <input type="number" name="items[0][cantidad]" step="0.001" min="0.001"
                                           class="form-control form-control-sm inp-cantidad" placeholder="0.000" required>
                                    <div class="input-group-append">
                                        <span class="input-group-text unidad-label">und</span>
                                    </div>
                                </div>
                            </td>
                            <td style="border-bottom:1px solid rgba(255,255,255,.1);border-top:none;border-left:none;border-right:none;text-align:center;">
                                <button type="button" class="btn btn-xs btn-outline-danger btn-quitar-item"><i class="fas fa-trash"></i></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="d-flex" style="gap:8px;">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="btnAgregarItem">
                    <i class="fas fa-plus mr-1"></i> Agregar ítem
                </button>
                <button type="submit" class="btn btn-sm btn-success ml-auto">
                    <i class="fas fa-paper-plane mr-1"></i> Enviar a Logística
                </button>
            </div>
        </form>
    </div>

    @if($orden->requerimientos->count() > 0)
    <div class="card-body border-top" style="border-color:rgba(255,255,255,.1)!important;">
        <p class="text-white-50 small mb-2"><i class="fas fa-history mr-1"></i> Requerimientos enviados:</p>
        @foreach($orden->requerimientos as $req)
        <div class="d-flex justify-content-between align-items-start pb-2 mb-2" style="border-bottom:1px solid rgba(255,255,255,.1);">
            <div>
                <a href="{{ route('mantenimiento.requerimientos.show', $req) }}" class="text-warning font-weight-bold">{{ $req->codigo }}</a>
                <small class="text-white-50 d-block">{{ $req->descripcion }} — {{ $req->items->count() }} ítem(s)</small>
                <small class="text-white-50">{{ $req->created_at->format('d/m/Y H:i') }}</small>
            </div>
            <div class="d-flex flex-column align-items-end" style="gap:4px;">
                <span class="badge badge-{{ $req->badge_estado }}">{{ \App\Models\MantenimientoRequerimiento::$ESTADOS[$req->estado] ?? $req->estado }}</span>
                <a href="{{ route('logistica.req-mant.pdf', $req) }}" class="btn btn-xs btn-outline-danger" target="_blank"><i class="fas fa-print mr-1"></i>Imprimir</a>
            </div>
        </div>
        @endforeach
    </div>
    @endif
</div>
@endif

{{-- Requerimientos en OT completada --}}
@if($orden->estado === 'completado' && $orden->requerimientos->count() > 0)
<div class="card">
    <div class="card-header"><h3 class="card-title"><i class="fas fa-boxes mr-1"></i> Repuestos Solicitados a Logística</h3></div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0">
            <thead class="thead-light">
                <tr><th>Código</th><th>Descripción</th><th class="text-center">Ítems</th><th class="text-center">Estado</th><th></th></tr>
            </thead>
            <tbody>
            @foreach($orden->requerimientos as $req)
            <tr>
                <td><a href="{{ route('mantenimiento.requerimientos.show', $req) }}" class="text-warning">{{ $req->codigo }}</a></td>
                <td>{{ $req->descripcion }}</td>
                <td class="text-center">{{ $req->items->count() }}</td>
                <td class="text-center"><span class="badge badge-{{ $req->badge_estado }}">{{ \App\Models\MantenimientoRequerimiento::$ESTADOS[$req->estado] ?? $req->estado }}</span></td>
                <td><a href="{{ route('logistica.req-mant.pdf', $req) }}" class="btn btn-xs btn-outline-danger" target="_blank"><i class="fas fa-print"></i></a></td>
            </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif

{{-- Informe técnico (si está completado) --}}
@if($orden->diagnostico || $orden->acciones_realizadas || $orden->observaciones)
<div class="card">
    <div class="card-header"><h3 class="card-title"><i class="fas fa-file-medical-alt mr-1"></i> Informe Técnico</h3></div>
    <div class="card-body">
        @if($orden->diagnostico)
        <p class="text-white-50 small mb-1">Diagnóstico</p>
        <p class="text-white mb-3">{{ $orden->diagnostico }}</p>
        @endif
        @if($orden->acciones_realizadas)
        <p class="text-white-50 small mb-1">Acciones Realizadas</p>
        <p class="text-white mb-3">{{ $orden->acciones_realizadas }}</p>
        @endif
        @if($orden->observaciones)
        <p class="text-white-50 small mb-1">Observaciones</p>
        <p class="text-white mb-0">{{ $orden->observaciones }}</p>
        @endif
    </div>
</div>
@endif

{{-- Checklist de Tareas --}}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title"><i class="fas fa-tasks mr-1"></i> Checklist de Tareas</h3>
        @php $total=$orden->tareas->count(); $hechas=$orden->tareas->where('completada',true)->count(); @endphp
        @if($total > 0)
        <span class="badge badge-{{ $hechas==$total ? 'success' : 'warning' }}">{{ $hechas }}/{{ $total }}</span>
        @endif
    </div>
    <div class="card-body">
        @if($total > 0)
        <ul class="list-group list-group-flush mb-3">
            @foreach($orden->tareas as $tarea)
            <li class="list-group-item d-flex justify-content-between align-items-center px-0" style="{{ $tarea->completada ? 'opacity:.7' : '' }}">
                <div class="d-flex align-items-center" style="gap:10px;">
                    <form action="{{ route('mantenimiento.ordenes.tareas.toggle', [$orden, $tarea]) }}" method="POST" class="m-0">
                        @csrf
                        <button type="submit" class="btn btn-sm {{ $tarea->completada ? 'btn-success' : 'btn-outline-secondary' }}" style="width:32px;height:32px;padding:0;">
                            <i class="fas fa-{{ $tarea->completada ? 'check' : 'circle' }}"></i>
                        </button>
                    </form>
                    <span style="{{ $tarea->completada ? 'text-decoration:line-through;' : '' }}">{{ $tarea->descripcion }}</span>
                </div>
                <div class="d-flex align-items-center" style="gap:8px;">
                    @if($tarea->completada && $tarea->completadaPor)
                    <small class="text-muted">{{ $tarea->completadaPor->name }} {{ $tarea->completada_at?->format('d/m H:i') }}</small>
                    @endif
                    <form action="{{ route('mantenimiento.ordenes.tareas.destroy', [$orden, $tarea]) }}" method="POST" class="m-0">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-xs btn-outline-danger" onclick="return confirm('¿Eliminar tarea?')"><i class="fas fa-trash"></i></button>
                    </form>
                </div>
            </li>
            @endforeach
        </ul>
        @if($total > 0)
        <div class="progress mb-3" style="height:8px;">
            <div class="progress-bar bg-success" style="width:{{ $total>0 ? round($hechas/$total*100) : 0 }}%"></div>
        </div>
        @endif
        @endif

        @if(!in_array($orden->estado, ['completado','cancelado']))
        <form action="{{ route('mantenimiento.ordenes.tareas.store', $orden) }}" method="POST" class="d-flex" style="gap:8px;">
            @csrf
            <input type="text" name="descripcion" class="form-control form-control-sm" placeholder="Nueva tarea del checklist..." required>
            <button type="submit" class="btn btn-primary btn-sm text-nowrap"><i class="fas fa-plus mr-1"></i> Agregar</button>
        </form>
        @endif
    </div>
</div>

@if($orden->foto_cierre)
<div class="card">
    <div class="card-header"><h3 class="card-title"><i class="fas fa-camera mr-1"></i> Evidencia Fotográfica</h3></div>
    <div class="card-body text-center">
        <img src="{{ Storage::url($orden->foto_cierre) }}" alt="Foto de cierre" style="max-width:100%;max-height:400px;border-radius:6px;">
    </div>
</div>
@endif

{{-- ═══ MODAL: COMPLETAR OT ═══ --}}
@if($orden->estado === 'en_proceso')
<div class="modal fade" id="modalCompletar" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="fas fa-check-circle mr-2"></i>Completar Orden de Trabajo</h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <form action="{{ route('mantenimiento.ordenes.completar', $orden) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Hora de Fin <span class="text-danger">*</span></label>
                                <input type="time" name="hora_fin" class="form-control" required value="{{ old('hora_fin', now()->format('H:i')) }}">
                                @if($orden->hora_inicio)
                                <small class="text-muted">Hora inicio: {{ \Carbon\Carbon::parse($orden->hora_inicio)->format('H:i') }}</small>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Foto de Evidencia</label>
                                <input type="file" name="foto_cierre" class="form-control-file" accept="image/*">
                                <small class="text-muted">JPG, PNG. Máx 4 MB.</small>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Diagnóstico de la falla</label>
                        <textarea name="diagnostico" class="form-control" rows="2" placeholder="Diagnóstico encontrado..."></textarea>
                    </div>

                    <div class="form-group">
                        <label>Acciones Realizadas <span class="text-danger">*</span></label>
                        <textarea name="acciones_realizadas" class="form-control" rows="4" required
                                  placeholder="Describe en detalle las acciones de mantenimiento realizadas..."></textarea>
                    </div>

                    {{-- Paro de máquina --}}
                    <div class="card bg-dark mb-0">
                        <div class="card-header py-2">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="chkParo" name="paro_maquina" value="1">
                                <label class="custom-control-label text-white" for="chkParo">
                                    <i class="fas fa-stop-circle mr-1 text-danger"></i> ¿Hubo paro de máquina / producción?
                                </label>
                            </div>
                        </div>
                        <div class="card-body py-2" id="seccionParo" style="display:none">
                            <div class="form-group mb-2">
                                <label class="small text-white-50">Motivo del paro</label>
                                <input type="text" name="paro_motivo" class="form-control form-control-sm"
                                       placeholder="Ej: Falla eléctrica motor principal, rotura de faja...">
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group mb-0">
                                        <label class="small text-white-50">Hora inicio del paro</label>
                                        <input type="time" name="paro_inicio" class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group mb-0">
                                        <label class="small text-white-50">Hora fin del paro</label>
                                        <input type="time" name="paro_fin" class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success"><i class="fas fa-check mr-1"></i> Confirmar Completado</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@php
$productosJs = $productos->map(function($p) {
    return [
        'id'     => $p->id,
        'nombre' => $p->nombre,
        'stock'  => $p->stock_disponible,
        'unidad' => optional($p->unidadMedida)->abreviatura ?? 'und',
    ];
})->values();
@endphp

@push('scripts')
<script>
(function () {
    'use strict';
    var URL_STOCK      = '{{ route("mantenimiento.ordenes.stock-producto") }}';
    var conAccion      = {{ in_array($orden->estado, ['pendiente','en_proceso']) ? 'true' : 'false' }};
    var idxItem        = 1;
    var stockPidActual = null;

    // ── Datos de productos para autocomplete ──────────────────────────────
    var PRODUCTOS = @json($productosJs);

    // ── Toggle paro de máquina ────────────────────────────────────────────
    var chkParo = document.getElementById('chkParo');
    if (chkParo) {
        chkParo.addEventListener('change', function () {
            document.getElementById('seccionParo').style.display = this.checked ? 'block' : 'none';
        });
    }

    // ═════════════════════════════════════════════════════════════════════
    // AUTOCOMPLETE GENÉRICO
    // ═════════════════════════════════════════════════════════════════════
    function buildAutoComplete(inputEl, dropdownEl, onSelect) {
        inputEl.addEventListener('input', function () {
            var q = this.value.trim().toLowerCase();
            dropdownEl.style.display = 'none';
            dropdownEl.innerHTML     = '';
            if (q.length < 1) return;

            var matches = PRODUCTOS.filter(function (p) {
                return p.nombre.toLowerCase().indexOf(q) !== -1 ||
                       String(p.id).indexOf(q) !== -1;
            }).slice(0, 12);

            if (matches.length === 0) {
                dropdownEl.innerHTML = '<div style="padding:8px 12px;color:#888;font-size:12px;">Sin resultados</div>';
                dropdownEl.style.display = 'block';
                return;
            }

            matches.forEach(function (p) {
                var stock = parseFloat(p.stock);
                var color = stock > 0 ? '#4CAF50' : '#ef5350';
                var item  = document.createElement('div');
                item.style.cssText = 'padding:7px 12px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;';
                item.innerHTML = '<span style="color:#ddd;font-size:13px;">' + p.nombre + '</span>' +
                    '<span style="font-size:11px;font-weight:bold;color:' + color + ';white-space:nowrap;margin-left:8px;">' +
                    stock.toFixed(2) + ' ' + p.unidad + '</span>';
                item.addEventListener('mousedown', function (e) {
                    e.preventDefault();
                    dropdownEl.style.display = 'none';
                    onSelect(p);
                });
                item.addEventListener('mouseover', function () { this.style.background = 'rgba(76,175,80,.15)'; });
                item.addEventListener('mouseout',  function () { this.style.background = ''; });
                dropdownEl.appendChild(item);
            });
            dropdownEl.style.display = 'block';
        });

        inputEl.addEventListener('blur', function () {
            setTimeout(function () { dropdownEl.style.display = 'none'; }, 150);
        });
    }

    // ═════════════════════════════════════════════════════════════════════
    // CONSULTA DE STOCK INLINE
    // ═════════════════════════════════════════════════════════════════════
    var inputBuscarStock = document.getElementById('inputBuscarStock');
    var dropdownStock    = document.getElementById('dropdownStock');

    if (inputBuscarStock) {
        buildAutoComplete(inputBuscarStock, dropdownStock, function (prod) {
            inputBuscarStock.style.display = 'none';
            var info = document.getElementById('stockProductoElegido');
            info.style.display = 'block';
            document.getElementById('stockNomElegido').textContent = prod.nombre;
            stockPidActual = prod.id;
            consultarStockInline(prod.id);
        });
    }

    document.getElementById('btnCambiarStock')?.addEventListener('click', function () {
        stockPidActual = null;
        inputBuscarStock.style.display = '';
        inputBuscarStock.value = '';
        inputBuscarStock.focus();
        document.getElementById('stockProductoElegido').style.display = 'none';
        resetStockPanel();
    });

    function resetStockPanel() {
        document.getElementById('rqPlaceholder').style.display = 'block';
        document.getElementById('rqCargando').style.display    = 'none';
        document.getElementById('rqTablaWrap').style.display   = 'none';
        document.getElementById('rqVacio').style.display       = 'none';
        document.getElementById('stockResumenRapido').style.display = 'none';
    }

    function consultarStockInline(pid) {
        document.getElementById('rqPlaceholder').style.display = 'none';
        document.getElementById('rqCargando').style.display    = 'block';
        document.getElementById('rqTablaWrap').style.display   = 'none';
        document.getElementById('rqVacio').style.display       = 'none';
        document.getElementById('stockResumenRapido').style.display = 'none';

        var csrfMeta = document.querySelector('meta[name="csrf-token"]');
        fetch(URL_STOCK + '?producto_id=' + pid, {
            credentials: 'same-origin',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfMeta ? csrfMeta.content : ''
            }
        })
        .then(function (r) {
            if (!r.ok) {
                return r.text().then(function(txt) {
                    throw new Error('HTTP ' + r.status + ' — ' + txt.substring(0, 120));
                });
            }
            return r.json();
        })
        .then(function (data) {
            document.getElementById('rqCargando').style.display = 'none';
            var p = data.producto, u = p.unidad;

            document.getElementById('rqStockTotal').textContent = parseFloat(p.stock_total).toFixed(3) + ' ' + u;
            document.getElementById('rqStockMin').textContent   = parseFloat(p.stock_minimo).toFixed(3) + ' ' + u;
            document.getElementById('stockResumenRapido').style.display = '';

            if (data.lotes.length === 0) {
                document.getElementById('rqVacio').style.display = 'block';
                return;
            }

            var tdS = 'border-bottom:1px solid rgba(255,255,255,.1);border-top:none;border-left:none;border-right:none;';
            var html = '';
            data.lotes.forEach(function (l) {
                var badge = l.estado === 'vigente' ? 'badge-success' : 'badge-warning';
                var label = l.estado === 'vigente' ? 'Vigente' : 'Por vencer';
                var venc  = l.vencimiento ? l.vencimiento : '<span style="color:#777;">Sin venc.</span>';
                var accion = '';
                if (conAccion) {
                    accion = '<td style="' + tdS + 'text-align:center;">' +
                        '<button type="button" class="btn btn-xs btn-outline-success btn-usar-lote" ' +
                        'data-pid="' + pid + '" data-nombre="' + p.nombre + '" ' +
                        'data-stock="' + l.cantidad + '" data-unidad="' + u + '">' +
                        '<i class="fas fa-plus-circle mr-1"></i>Usar</button></td>';
                }
                html += '<tr>' +
                    '<td style="' + tdS + '"><code style="color:#A5D6A7;">' + (l.numero || '—') + '</code></td>' +
                    '<td style="' + tdS + 'color:#ccc;">' + l.almacen + '</td>' +
                    '<td style="' + tdS + 'text-align:right;font-weight:bold;color:#A5D6A7;">' + parseFloat(l.cantidad).toFixed(3) + ' ' + u + '</td>' +
                    '<td style="' + tdS + 'color:#ccc;">' + venc + '</td>' +
                    '<td style="' + tdS + 'text-align:center;"><span class="badge ' + badge + '">' + label + '</span></td>' +
                    accion + '</tr>';
            });
            document.getElementById('rqTbodyLotes').innerHTML = html;
            document.getElementById('rqTablaWrap').style.display = 'block';
        })
        .catch(function (err) {
            document.getElementById('rqCargando').style.display = 'none';
            document.getElementById('rqTbodyLotes').innerHTML =
                '<tr><td colspan="6" class="text-center text-danger py-2"><strong>Error:</strong> ' + (err.message || 'Sin detalles') + '</td></tr>';
            document.getElementById('rqTablaWrap').style.display = 'block';
        });
    }

    // ── Botón "Usar" → pre-rellena la última fila del formulario ─────────
    document.getElementById('rqTablaWrap')?.addEventListener('click', function (e) {
        var btn = e.target.closest('.btn-usar-lote');
        if (!btn || !conAccion) return;
        var ultimaFila = document.querySelector('#itemsRepBody .fila-item:last-child');
        if (!ultimaFila) return;

        var inp  = ultimaFila.querySelector('.inp-buscar-prod');
        var pid  = ultimaFila.querySelector('.inp-pid');
        var cant = ultimaFila.querySelector('.inp-cantidad');
        var unid = ultimaFila.querySelector('.unidad-label');
        var bdg  = ultimaFila.querySelector('.stock-badge');

        if (inp)  inp.value  = btn.dataset.nombre;
        if (pid)  pid.value  = btn.dataset.pid;
        if (cant) cant.value = parseFloat(btn.dataset.stock).toFixed(3);
        if (unid) unid.textContent = btn.dataset.unidad;
        if (bdg)  { bdg.textContent = parseFloat(btn.dataset.stock).toFixed(3) + ' ' + btn.dataset.unidad; bdg.className = 'badge badge-success stock-badge'; }

        document.getElementById('cardSolicitarRep')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });

    // ═════════════════════════════════════════════════════════════════════
    // AUTOCOMPLETE EN FILAS DEL FORMULARIO DE SOLICITUD
    // ═════════════════════════════════════════════════════════════════════
    function initFilaAutoComplete(fila) {
        var inp  = fila.querySelector('.inp-buscar-prod');
        var pid  = fila.querySelector('.inp-pid');
        var drop = fila.querySelector('.dropdown-prod');
        var bdg  = fila.querySelector('.stock-badge');
        var unid = fila.querySelector('.unidad-label');

        buildAutoComplete(inp, drop, function (prod) {
            inp.value  = prod.nombre;
            pid.value  = prod.id;
            var s      = parseFloat(prod.stock);
            bdg.textContent = s.toFixed(3) + ' ' + prod.unidad;
            bdg.className   = 'badge stock-badge ' + (s > 0 ? 'badge-success' : 'badge-danger');
            if (unid) unid.textContent = prod.unidad;
        });
    }

    // Init primera fila
    document.querySelectorAll('#itemsRepBody .fila-item').forEach(initFilaAutoComplete);

    // ── Agregar nueva fila ────────────────────────────────────────────────
    document.getElementById('btnAgregarItem')?.addEventListener('click', function () {
        var tbody   = document.getElementById('itemsRepBody');
        var primera = tbody.querySelector('.fila-item');
        var clone   = primera.cloneNode(true);

        clone.querySelectorAll('[name]').forEach(function (el) {
            el.name = el.name.replace(/\[\d+\]/, '[' + idxItem + ']');
            el.value = '';
        });
        clone.querySelector('.inp-buscar-prod').value = '';
        clone.querySelector('.stock-badge').textContent = '—';
        clone.querySelector('.stock-badge').className   = 'badge badge-secondary stock-badge';
        clone.querySelector('.unidad-label').textContent = 'und';
        clone.querySelector('.dropdown-prod').innerHTML  = '';
        clone.querySelector('.dropdown-prod').style.display = 'none';

        tbody.appendChild(clone);
        initFilaAutoComplete(clone);
        idxItem++;
    });

    // ── Quitar fila ───────────────────────────────────────────────────────
    document.getElementById('itemsRepBody')?.addEventListener('click', function (e) {
        var btn = e.target.closest('.btn-quitar-item');
        if (!btn) return;
        var filas = this.querySelectorAll('.fila-item');
        if (filas.length > 1) btn.closest('tr').remove();
        else alert('Debe quedar al menos un ítem.');
    });

})();
</script>
@endpush

@endsection