@extends('layouts.admin')

@section('title', 'Kardex')

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
    <div>
        <h1 class="h3 mb-1">Kardex</h1>
        <p class="text-secondary mb-0">Historial de movimientos. Las compras se muestran como se registraron (cajas o unidades).</p>
    </div>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="table align-middle mb-0 kardex-table">
            <thead>
                <tr>
                    <th style="width:40px"></th>
                    <th>Fecha</th>
                    <th>Tipo</th>
                    <th>Producto</th>
                    <th>Lote</th>
                    <th>Modo</th>
                    <th class="text-end">Cantidad</th>
                    <th class="text-end">Antes</th>
                    <th class="text-end">Después</th>
                </tr>
            </thead>
            <tbody>
                @forelse($movements as $m)
                    @php
                        $meta = $m->displayMeta();
                        $detailId = 'kardex-detail-'.$m->id;
                        $modeClass = $meta['mode'] === 'packs' ? 'primary' : 'secondary';
                    @endphp
                    <tr class="kardex-row" data-bs-toggle="collapse" data-bs-target="#{{ $detailId }}" aria-expanded="false" role="button">
                        <td class="text-center text-secondary">
                            <i class="bi bi-chevron-down kardex-chevron"></i>
                        </td>
                        <td class="text-nowrap">{{ $m->created_at->format('d/m/Y H:i') }}</td>
                        <td>
                            <span class="badge text-bg-light border">{{ $m->typeLabel() }}</span>
                        </td>
                        <td>
                            <div class="fw-semibold">{{ $m->product?->name }}</div>
                            <div class="small text-secondary font-monospace">{{ $m->product?->sku }}</div>
                        </td>
                        <td class="font-monospace small">{{ $m->batch?->code ?: '—' }}</td>
                        <td>
                            <span class="badge text-bg-{{ $modeClass }}">{{ $meta['mode_label'] }}</span>
                        </td>
                        <td class="text-end">
                            <div class="fw-semibold">{{ $meta['quantity'] }}</div>
                            @if($meta['secondary_qty'])
                                <div class="small text-secondary">{{ $meta['secondary_qty'] }}</div>
                            @endif
                        </td>
                        <td class="text-end small">{{ $meta['previous'] }}</td>
                        <td class="text-end small fw-semibold">{{ $meta['next'] }}</td>
                    </tr>
                    <tr class="kardex-detail-row">
                        <td colspan="9" class="p-0 border-0">
                            <div id="{{ $detailId }}" class="collapse">
                                <div class="kardex-detail">
                                    <div class="row g-3">
                                        <div class="col-md-3">
                                            <div class="kardex-detail__label">Proveedor / lote</div>
                                            <div class="fw-semibold">{{ $m->batch?->supplier?->business_name ?: '—' }}</div>
                                            <div class="small text-secondary font-monospace">{{ $m->batch?->code }}</div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="kardex-detail__label">Costo</div>
                                            @if($meta['cost_primary'])
                                                <div class="fw-semibold">{{ $meta['cost_primary'] }}</div>
                                                @if($meta['cost_secondary'])
                                                    <div class="small text-secondary">{{ $meta['cost_secondary'] }}</div>
                                                @endif
                                            @else
                                                <span class="text-secondary">—</span>
                                            @endif
                                        </div>
                                        <div class="col-md-3">
                                            <div class="kardex-detail__label">P.V.P.</div>
                                            @if($meta['pvp_primary'])
                                                <div class="fw-semibold">{{ $meta['pvp_primary'] }}</div>
                                                @if($meta['pvp_secondary'])
                                                    <div class="small text-secondary">{{ $meta['pvp_secondary'] }}</div>
                                                @endif
                                            @else
                                                <span class="text-secondary">—</span>
                                            @endif
                                        </div>
                                        <div class="col-md-3">
                                            <div class="kardex-detail__label">Total línea</div>
                                            <div class="fw-semibold">{{ $meta['line_total'] ?: '—' }}</div>
                                            @if($meta['mode'] === 'packs')
                                                <div class="small text-secondary">1 {{ $meta['pack_name'] }} = {{ $meta['units_per_pack'] }} und.</div>
                                            @endif
                                        </div>
                                        @if($m->notes)
                                            <div class="col-12">
                                                <div class="kardex-detail__label">Notas</div>
                                                <div>{{ $m->notes }}</div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="text-center py-5 text-secondary">No hay movimientos registrados.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($movements->hasPages())
        <div class="card-footer">{{ $movements->links() }}</div>
    @endif
</div>
@endsection

@push('styles')
<style>
.kardex-table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #5B6570;
    background: #F7F9FB;
    white-space: nowrap;
}
.kardex-row { cursor: pointer; }
.kardex-row:hover { background: #F7FBFE; }
.kardex-row[aria-expanded="true"] .kardex-chevron { transform: rotate(180deg); }
.kardex-chevron { transition: transform .15s ease; display: inline-block; }
.kardex-detail {
    background: #F5F8FB;
    border-top: 1px dashed #D7E0EA;
    border-bottom: 1px solid #E7ECF2;
    padding: 1rem 1.25rem 1.1rem 3rem;
}
.kardex-detail__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c7a89;
    margin-bottom: .25rem;
}
</style>
@endpush

@push('scripts')
<script>
document.querySelectorAll('.kardex-row').forEach((row) => {
    const target = document.querySelector(row.getAttribute('data-bs-target'));
    if (!target) return;
    target.addEventListener('show.bs.collapse', () => row.setAttribute('aria-expanded', 'true'));
    target.addEventListener('hide.bs.collapse', () => row.setAttribute('aria-expanded', 'false'));
});
</script>
@endpush