@extends('layouts.app')

@section('title', 'Inventory History')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="sm:flex sm:items-center justify-between mb-6">
        <div>
            <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Inventory History</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">Complete log of all stock movements</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <a href="{{ route('inventory.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                Back to Inventory
            </a>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
        <form method="GET" action="{{ route('inventory.movements') }}">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <!-- Search -->
                <div>
                    <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Search</label>
                    <input type="text" name="search" id="search" value="{{ $search ?? '' }}" placeholder="SKU, Reference, Notes..."
                           class="block w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:focus:ring-offset-gray-800 placeholder:text-gray-500 dark:placeholder:text-gray-400">
                </div>

                <!-- Type Filter -->
                <div>
                    <label for="type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Type</label>
                    <select name="type" id="type"
                            class="block w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:focus:ring-offset-gray-800">
                        <option value="">All Types</option>
                        @foreach($types as $movementType)
                            <option value="{{ $movementType }}" {{ $type == $movementType ? 'selected' : '' }}>
                                {{ ucfirst(str_replace('_', ' ', $movementType)) }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Start Date -->
                <div>
                    <label for="start_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start Date</label>
                    <input type="date" name="start_date" id="start_date" value="{{ $startDate ?? '' }}"
                           class="block w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:focus:ring-offset-gray-800">
                </div>

                <!-- End Date -->
                <div>
                    <label for="end_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">End Date</label>
                    <input type="date" name="end_date" id="end_date" value="{{ $endDate ?? '' }}"
                           class="block w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:focus:ring-offset-gray-800">
                </div>
            </div>

            <div class="mt-4 flex items-center gap-3">
                <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 font-medium dark:focus:ring-offset-gray-800">
                    Apply Filters
                </button>
                <a href="{{ route('inventory.movements') }}" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">
                    Clear All
                </a>
                <span class="text-sm text-gray-500 dark:text-gray-400">
                    Showing movements from {{ \Carbon\Carbon::parse($startDate)->format('d M Y') }} to {{ \Carbon\Carbon::parse($endDate)->format('d M Y') }}
                </span>
            </div>
        </form>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
        @if($movements->count() > 0)
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Date & Time</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">SKU</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Type</th>
                        <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Qty Change</th>
                        <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Balance</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Reference</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Performed By</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($movements as $movement)
                        @php
                        // Determine if this movement increases or decreases stock
                        // For 'adjustment' type, check the actual quantity sign (positive = add, negative = remove)
                        // For other types, use type-based logic
                        if ($movement->type === 'adjustment') {
                            $isStockIncrease = $movement->quantity > 0;
                            $isStockDecrease = $movement->quantity < 0;
                        } else {
                            $isStockIncrease = in_array($movement->type, ['in', 'transfer_in', 'customer_return']);
                            $isStockDecrease = in_array($movement->type, ['out', 'transfer_out', 'supplier_return']);
                        }

                        // Calculate balance before (for clarity)
                        // Use abs() since quantity may be stored as negative for decreases
                        $qtyAbs = abs($movement->quantity);
                        $balanceBefore = $isStockIncrease
                            ? $movement->balance_after - $qtyAbs
                            : $movement->balance_after + $qtyAbs;
                    @endphp
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900 dark:text-white">{{ \Carbon\Carbon::parse($movement->performed_at)->format('d M Y') }}</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">{{ \Carbon\Carbon::parse($movement->performed_at)->format('H:i:s') }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $movement->sku }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @php
                                    $typeColors = [
                                        'in' => 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300',
                                        'out' => 'bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-300',
                                        'adjustment' => 'bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300',
                                        'transfer_in' => 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300',
                                        'transfer_out' => 'bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-300',
                                        'customer_return' => 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300',
                                        'supplier_return' => 'bg-orange-100 dark:bg-orange-900/50 text-orange-800 dark:text-orange-300',
                                    ];
                                    $typeLabels = [
                                        'in' => 'Stock In',
                                        'out' => 'Stock Out',
                                        'adjustment' => 'Adjustment',
                                        'transfer_in' => 'Transfer In',
                                        'transfer_out' => 'Transfer Out',
                                        'customer_return' => 'Customer Return',
                                        'supplier_return' => 'Supplier Return',
                                    ];
                                @endphp
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $typeColors[$movement->type] ?? 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300' }}">
                                    {{ $typeLabels[$movement->type] ?? ucfirst(str_replace('_', ' ', $movement->type)) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-center">
                                @if($isStockDecrease)
                                    <span class="text-sm font-bold text-red-600 dark:text-red-400">
                                        -{{ number_format(abs($movement->quantity)) }}
                                    </span>
                                @else
                                    <span class="text-sm font-bold text-green-600 dark:text-green-400">
                                        +{{ number_format(abs($movement->quantity)) }}
                                    </span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-center">
                                <div class="text-xs text-gray-500 dark:text-gray-400">{{ number_format($balanceBefore) }}</div>
                                <div class="text-sm font-medium text-gray-900 dark:text-white">→ {{ number_format($movement->balance_after) }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900 dark:text-white">{{ $movement->reference_number ?? '-' }}</div>
                                @if($movement->notes)
                                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ $movement->notes }}</div>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                {{ $movement->performed_by_name }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700">
                {{ $movements->appends(['search' => $search, 'type' => $type, 'start_date' => $startDate, 'end_date' => $endDate])->links() }}
            </div>
        @else
            <div class="text-center py-12">
                <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No movements yet</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Stock movements will appear here when you receive or use inventory.</p>
            </div>
        @endif
    </div>
</div>
@endsection