@extends('layouts.app')
@section('title', 'Stock Movement Report')
@section('breadcrumb')
<li class="breadcrumb-item"><a href="#">Reports</a></li>
<li class="breadcrumb-item active">Stock Movements</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:#7c3aed;"></i>Stock Movement Report</h1>
        <p class="page-subtitle">{{ $from->format('d M Y') }} — {{ $to->format('d M Y') }}</p>
    </div>
    <button onclick="window.print()" class="btn btn-outline-secondary btn-sm"><i class="bi bi-printer me-1"></i>Print</button>
</div>

@include('reports.partials.date-filter')

<div class="row g-3 mb-3">
    <div class="col-4">
        <div class="stat-card"><div class="stat-icon" style="background:#dbeafe;"><i class="bi bi-arrow-left-right" style="color:#1d4ed8;"></i></div>
        <div><div class="stat-value">{{ number_format($totals->total_movements) }}</div><div class="stat-label">Total Movements</div></div></div>
    </div>
    <div class="col-4">
        <div class="stat-card"><div class="stat-icon" style="background:#d1fae5;"><i class="bi bi-arrow-down-circle" style="color:#059669;"></i></div>
        <div><div class="stat-value" style="color:#059669;">+{{ number_format($totals->total_in) }}</div><div class="stat-label">Total In</div></div></div>
    </div>
    <div class="col-4">
        <div class="stat-card"><div class="stat-icon" style="background:#fee2e2;"><i class="bi bi-arrow-up-circle" style="color:#dc2626;"></i></div>
        <div><div class="stat-value" style="color:#dc2626;">-{{ number_format($totals->total_out) }}</div><div class="stat-label">Total Out</div></div></div>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header fw-600">By Movement Type</div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0" style="font-size:.82rem;">
            <thead><tr><th>Type</th><th>Direction</th><th class="text-end">Count</th><th class="text-end">Total Qty</th></tr></thead>
            <tbody>
                @foreach($byType as $bt)
                <tr>
                    <td><span class="badge bg-secondary">{{ ucfirst($bt->movement_type) }}</span></td>
                    <td><span class="badge {{ $bt->direction === 'in' ? 'bg-success' : 'bg-danger' }}">{{ strtoupper($bt->direction) }}</span></td>
                    <td class="text-end">{{ $bt->count }}</td>
                    <td class="text-end fw-700" style="color:{{ $bt->direction === 'in' ? '#059669' : '#dc2626' }};">{{ $bt->direction === 'in' ? '+' : '-' }}{{ number_format($bt->total_qty) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="card">
    <div class="card-header fw-600">Movement Log ({{ $movements->total() }})</div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0" style="font-size:.8rem;">
                <thead><tr><th>Date & Time</th><th>Product</th><th>Type</th><th>Direction</th><th class="text-end">Qty</th><th class="text-end">Before</th><th class="text-end">After</th><th>Reference</th><th>By</th></tr></thead>
                <tbody>
                    @forelse($movements as $m)
                    <tr>
                        <td style="white-space:nowrap;">{{ $m->created_at->format('d M Y H:i') }}</td>
                        <td>
                            <div class="fw-600">{{ $m->productVariant->product->name }}</div>
                            <div style="font-size:.72rem;color:#64748b;">{{ $m->productVariant->variant_name }}</div>
                        </td>
                        <td><span class="badge bg-secondary" style="font-size:.65rem;">{{ ucfirst($m->movement_type) }}</span></td>
                        <td><span class="badge {{ $m->direction === 'in' ? 'bg-success' : 'bg-danger' }}" style="font-size:.65rem;">{{ strtoupper($m->direction) }}</span></td>
                        <td class="text-end fw-700" style="color:{{ $m->direction === 'in' ? '#059669' : '#dc2626' }};">{{ $m->direction === 'in' ? '+' : '-' }}{{ $m->quantity }}</td>
                        <td class="text-end" style="color:#94a3b8;">{{ $m->before_qty }}</td>
                        <td class="text-end fw-700">{{ $m->after_qty }}</td>
                        <td><code style="font-size:.7rem;">{{ $m->reference ?? '—' }}</code></td>
                        <td style="font-size:.75rem;color:#94a3b8;">{{ $m->creator->name }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="9" class="text-center py-4 text-muted">No movements in this period</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($movements->hasPages())<div class="card-footer">{{ $movements->links() }}</div>@endif
</div>
@endsection