@extends('layouts.app')
@section('title', 'Stock Movements')
@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('inventory.index') }}">Inventory</a></li>
<li class="breadcrumb-item active">Movement Log</li>
@endsection
@section('content')

<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <h1 class="page-title"><i class="bi bi-arrow-left-right me-2" style="color:#1d4ed8;"></i>Stock Movement Log</h1>
        <p class="page-subtitle">Complete audit trail of every stock in and out</p>
    </div>
    <a href="{{ route('inventory.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-boxes me-1"></i> Back to Inventory
    </a>
</div>

<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-center">
            <div class="col-12 col-md-3">
                <input type="text" name="search" class="form-control" placeholder="Search SKU, reference..." value="{{ $search }}">
            </div>
            <div class="col-6 col-md-2">
                <select name="type" class="form-select">
                    <option value="">All Types</option>
                    @foreach($types as $t)
                    <option value="{{ $t }}" {{ $type === $t ? 'selected' : '' }}>{{ ucfirst($t) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <select name="direction" class="form-select">
                    <option value="">In & Out</option>
                    <option value="in"  {{ $direction === 'in'  ? 'selected' : '' }}>Stock In</option>
                    <option value="out" {{ $direction === 'out' ? 'selected' : '' }}>Stock Out</option>
                </select>
            </div>
            <div class="col-6 col-md-2">
                <input type="date" name="from" class="form-control" value="{{ $from }}" placeholder="From">
            </div>
            <div class="col-6 col-md-2">
                <input type="date" name="to" class="form-control" value="{{ $to }}" placeholder="To">
            </div>
            <div class="col-auto d-flex gap-1">
                <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i></button>
                <a href="{{ route('inventory.movements') }}" class="btn btn-outline-secondary"><i class="bi bi-x"></i></a>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header">Movement Log ({{ $movements->total() }})</div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0" style="font-size:.825rem;">
                <thead>
                    <tr>
                        <th>Date & Time</th>
                        <th>Product / Variant</th>
                        <th>Type</th>
                        <th>Direction</th>
                        <th>Qty</th>
                        <th>Before</th>
                        <th>After</th>
                        <th>Reference</th>
                        <th>By</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($movements as $movement)
                    <tr>
                        <td style="white-space:nowrap;">{{ $movement->created_at->format('d M Y H:i') }}</td>
                        <td>
                            <div class="fw-600">{{ $movement->productVariant->product->name }}</div>
                            <div style="font-size:.75rem;color:#64748b;">{{ $movement->productVariant->variant_name }}</div>
                        </td>
                        <td>
                            @php
                            $tc = ['purchase'=>'success','sale'=>'primary','adjustment'=>'warning','return'=>'info','damage'=>'danger','loss'=>'danger','transfer'=>'secondary'];
                            @endphp
                            <span class="badge bg-{{ $tc[$movement->movement_type] ?? 'secondary' }}" style="font-size:.68rem;">
                                {{ ucfirst($movement->movement_type) }}
                            </span>
                        </td>
                        <td>
                            <span class="badge {{ $movement->direction === 'in' ? 'bg-success' : 'bg-danger' }}" style="font-size:.68rem;">
                                <i class="bi bi-arrow-{{ $movement->direction === 'in' ? 'down' : 'up' }}-circle me-1"></i>
                                {{ strtoupper($movement->direction) }}
                            </span>
                        </td>
                        <td class="fw-700" style="color:{{ $movement->direction === 'in' ? '#059669' : '#dc2626' }};">
                            {{ $movement->direction === 'in' ? '+' : '-' }}{{ $movement->quantity }}
                        </td>
                        <td style="color:#94a3b8;">{{ $movement->before_qty }}</td>
                        <td class="fw-600">{{ $movement->after_qty }}</td>
                        <td><code style="font-size:.72rem;">{{ $movement->reference ?? '—' }}</code></td>
                        <td style="font-size:.78rem;color:#64748b;">{{ $movement->creator->name }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-5 text-muted">
                            <i class="bi bi-arrow-left-right" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>
                            No stock movements found.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($movements->hasPages())<div class="card-footer">{{ $movements->links() }}</div>@endif
</div>

@endsection