<x-app-layout>
    <x-slot name="title">
        Detalle del Insumo
    </x-slot>

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold text-dark mb-0">{{ $insumo->nombre }}</h4>
        <div>
            <a href="{{ route('insumos.index') }}" class="btn btn-light border rounded-pill btn-sm shadow-sm me-2">
                <i class="bi bi-arrow-left"></i> Volver
            </a>
            <a href="{{ route('insumos.edit', $insumo) }}" class="btn btn-primary rounded-pill btn-sm shadow-sm">
                <i class="bi bi-pencil-fill"></i> Editar
            </a>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <!-- Detalles Principales -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-header bg-transparent border-bottom-0 pt-4 pb-0 d-flex justify-content-between align-items-center">
                    <h6 class="fw-bold mb-0 text-muted text-uppercase" style="letter-spacing: 0.5px;">Información General</h6>
                    @if($insumo->activo)
                        <span class="badge bg-success bg-opacity-10 text-success rounded-pill px-3 py-2">Estado: Activo</span>
                    @else
                        <span class="badge bg-secondary bg-opacity-10 text-secondary rounded-pill px-3 py-2">Estado: Inactivo</span>
                    @endif
                </div>
                <div class="card-body p-4">
                    <div class="row g-4">
                        <div class="col-sm-6">
                            <p class="text-muted small fw-bold mb-1">Nombre</p>
                            <p class="fw-semibold text-dark mb-0">{{ $insumo->nombre }}</p>
                        </div>
                        <div class="col-sm-6">
                            <p class="text-muted small fw-bold mb-1">Marca</p>
                            <p class="fw-semibold text-dark mb-0">{{ $insumo->marca ?: '-' }}</p>
                        </div>
                        <div class="col-sm-6">
                            <p class="text-muted small fw-bold mb-1">Unidad de Compra</p>
                            <p class="fw-semibold text-dark mb-0">{{ $insumo->unidad_compra }}</p>
                        </div>
                        <div class="col-sm-6">
                            <p class="text-muted small fw-bold mb-1">Unidad de Uso</p>
                            <p class="fw-semibold text-dark mb-0">{{ $insumo->unidad_uso }}</p>
                        </div>
                        <div class="col-12 mt-4">
                            <div class="p-3 bg-light rounded-4 border">
                                <p class="text-muted small fw-bold mb-1">Costo Unitario</p>
                                <h4 class="fw-bold text-primary mb-0">{{ $moneda }}{{ number_format($insumo->costo_unitario, 2) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stock Widget -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm rounded-4 h-100 card-solid bg-gradient-blue">
                <i class="bi bi-box-seam icon-bg text-white"></i>
                <div class="card-body p-4 d-flex flex-column justify-content-center text-center">
                    <h6 class="text-white text-opacity-75 fw-bold text-uppercase mb-3" style="letter-spacing: 0.5px;">Stock en Sucursal</h6>
                    
                    @if($stock)
                        @php $alertaStock = $stock->cantidad_actual < $stock->cantidad_minima; @endphp
                        
                        <h2 class="display-4 fw-bold text-white mb-0">
                            {{ number_format($stock->cantidad_actual, 2) }}
                        </h2>
                        <p class="text-white text-opacity-75 fs-5 mb-4">{{ $insumo->unidad_uso }}</p>
                        
                        <div class="mt-auto border-top border-light border-opacity-25 pt-3 d-flex justify-content-between align-items-center">
                            <div class="text-start">
                                <span class="text-white text-opacity-75 small">Mínimo sugerido</span><br>
                                <span class="text-white fw-bold">{{ number_format($stock->cantidad_minima, 2) }} {{ $insumo->unidad_uso }}</span>
                            </div>
                            
                            @if($alertaStock)
                                <div class="badge bg-danger text-white rounded-pill px-3 py-2 fs-6 shadow">
                                    <i class="bi bi-exclamation-triangle-fill me-1"></i> ¡ALERTA!
                                </div>
                            @else
                                <div class="badge bg-white text-primary rounded-pill px-3 py-2 shadow-sm">
                                    <i class="bi bi-check-circle-fill text-success me-1"></i> Normal
                                </div>
                            @endif
                        </div>
                    @else
                        <div class="py-5">
                            <i class="bi bi-info-circle fs-1 text-white text-opacity-50"></i>
                            <p class="text-white mt-3 mb-0">No hay registro de stock para esta sucursal.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Historial de Kardex -->
    <div class="card border-0 shadow-sm rounded-4 mb-4">
        <div class="card-header bg-transparent border-bottom-0 pt-4 pb-0 d-flex justify-content-between align-items-center">
            <h6 class="fw-bold mb-0 text-muted text-uppercase" style="letter-spacing: 0.5px;">Últimos Movimientos (Kardex)</h6>
            <a href="{{ route('almacen.kardex', ['insumo' => $insumo->id]) }}" class="btn btn-link text-decoration-none btn-sm fw-bold">
                Ver Todo <i class="bi bi-arrow-right"></i>
            </a>
        </div>
        <div class="card-body p-0 mt-3">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="ps-4 py-3 text-secondary text-uppercase" style="font-size: 0.75rem; font-weight: 700;">Fecha</th>
                            <th class="py-3 text-secondary text-uppercase" style="font-size: 0.75rem; font-weight: 700;">Tipo</th>
                            <th class="py-3 text-secondary text-uppercase" style="font-size: 0.75rem; font-weight: 700;">Motivo/Ref</th>
                            <th class="py-3 text-end text-secondary text-uppercase" style="font-size: 0.75rem; font-weight: 700;">Cantidad</th>
                            <th class="pe-4 py-3 text-end text-secondary text-uppercase" style="font-size: 0.75rem; font-weight: 700;">Saldo Final</th>
                        </tr>
                    </thead>
                    <tbody class="border-top-0">
                        @forelse ($kardex as $k)
                            <tr>
                                <td class="ps-4 py-3 text-muted small">
                                    <i class="bi bi-calendar3 me-1"></i> {{ $k->created_at->format('d/m/Y H:i') }}
                                </td>
                                <td class="py-3">
                                    @if($k->tipo === 'entrada')
                                        <span class="badge bg-success bg-opacity-10 text-success rounded-pill px-2"><i class="bi bi-arrow-down-left"></i> Entrada</span>
                                    @else
                                        <span class="badge bg-danger bg-opacity-10 text-danger rounded-pill px-2"><i class="bi bi-arrow-up-right"></i> Salida</span>
                                    @endif
                                </td>
                                <td class="py-3 text-muted small" title="{{ $k->motivo }}{{ $k->referencia ? ' | Ref: ' . $k->referencia : '' }}">
                                    <div class="text-truncate" style="max-width: 250px;">
                                        <span class="fw-bold text-dark">{{ $k->motivo }}</span>
                                        @if($k->referencia)
                                            <div class="text-secondary" style="font-size: 0.7rem;">Ref: {{ $k->referencia }}</div>
                                        @endif
                                    </div>
                                </td>
                                <td class="py-3 text-end fw-bold {{ $k->tipo === 'entrada' ? 'text-success' : 'text-danger' }}">
                                    {{ $k->tipo === 'entrada' ? '+' : '-' }}{{ number_format($k->cantidad, 2) }}
                                </td>
                                <td class="pe-4 py-3 text-end fw-bold text-dark">
                                    {{ number_format($k->saldo_posterior, 2) }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-4 text-muted">
                                    No se registran movimientos en el kardex para este insumo.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</x-app-layout>
