@extends('layouts.app')
@section('title', 'Stock Movements')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="page-title"><i class="bi bi-arrow-left-right me-2"></i>Stock Movements</h1>
        <a href="{{ route('inventory.stock.transfer') }}" class="btn btn-primary">
            <i class="bi bi-arrow-repeat me-1"></i> New Transfer
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success fade-in">
            <i class="bi bi-check-circle me-1"></i> {{ session('success') }}
        </div>
    @endif

    <!-- Filters -->
    <div class="card card-body mb-4">
        <form method="GET" class="row g-3 align-items-end">
            <div class="col-md-2">
                <label class="form-label">Material</label>
                <select name="material_id" class="form-select">
                    <option value="">All Materials</option>
                    @foreach($materials as $id => $name)
                        <option value="{{ $id }}" {{ request('material_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Project</label>
                <select name="project_id" class="form-select">
                    <option value="">All</option>
                    @foreach($projects as $id => $name)
                        <option value="{{ $id }}" {{ request('project_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Type</label>
                <select name="type" class="form-select">
                    <option value="">All</option>
                    <option value="in" {{ request('type') == 'in' ? 'selected' : '' }}>Stock In</option>
                    <option value="out" {{ request('type') == 'out' ? 'selected' : '' }}>Stock Out</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">Source</label>
                <select name="source_type" class="form-select">
                    <option value="">All Sources</option>
                    <option value="purchase" {{ request('source_type') == 'purchase' ? 'selected' : '' }}>Purchase</option>
                    <option value="construction_usage" {{ request('source_type') == 'construction_usage' ? 'selected' : '' }}>Usage</option>
                    <option value="project_transfer" {{ request('source_type') == 'project_transfer' ? 'selected' : '' }}>Transfer</option>
                    <option value="manual_adjustment" {{ request('source_type') == 'manual_adjustment' ? 'selected' : '' }}>Manual</option>
                    <option value="return" {{ request('source_type') == 'return' ? 'selected' : '' }}>Return</option>
                </select>
            </div>
            <div class="col-md-1">
                <label class="form-label">From</label>
                <input type="date" name="from" class="form-control" value="{{ request('from') }}">
            </div>
            <div class="col-md-1">
                <label class="form-label">To</label>
                <input type="date" name="to" class="form-control" value="{{ request('to') }}">
            </div>
            <div class="col-md-1">
                <button type="submit" class="btn btn-outline-primary w-100"><i class="bi bi-filter"></i></button>
            </div>
            @if(request()->hasAny(['material_id', 'project_id', 'type', 'source_type', 'from', 'to']))
                <div class="col-md-1">
                    <a href="{{ route('inventory.stock.movements') }}" class="btn btn-outline-secondary w-100" title="Clear filters">
                        <i class="bi bi-x-lg"></i>
                    </a>
                </div>
            @endif
        </form>
    </div>

    <div class="card">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Material</th>
                        <th>Type</th>
                        <th class="text-end">Qty</th>
                        <th>Project</th>
                        <th>Source</th>
                        <th>Notes</th>
                        <th>By</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($movements as $mv)
                        <tr class="{{ $mv->isTransfer() ? 'transfer-row' : '' }}">
                            <td>{{ $mv->created_at->format('d M Y H:i') }}</td>
                            <td>{{ $mv->material->material_name }}</td>
                            <td>
                                @if($mv->isTransfer())
                                    {{-- Transfer-specific badges --}}
                                    @if($mv->type === 'out')
                                        <span class="badge bg-transfer-out">
                                            <i class="bi bi-arrow-up-right"></i> TRANSFER OUT
                                        </span>
                                    @else
                                        <span class="badge bg-transfer-in">
                                            <i class="bi bi-arrow-down-left"></i> TRANSFER IN
                                        </span>
                                    @endif
                                @else
                                    <span class="badge bg-{{ $mv->type === 'in' ? 'success' : 'danger' }}">
                                        <i class="bi bi-arrow-{{ $mv->type === 'in' ? 'down' : 'up' }}"></i>
                                        {{ strtoupper($mv->type) }}
                                    </span>
                                @endif
                            </td>
                            <td class="text-end fw-bold">{{ number_format((float) $mv->quantity, 2) }} {{ $mv->material->unit }}
                            </td>
                            <td>
                                @if($mv->isTransfer())
                                    {{-- Show transfer direction --}}
                                    <div class="transfer-direction">
                                        @if($mv->type === 'out')
                                            <span class="text-danger small fw-semibold">
                                                <i class="bi bi-dash-circle"></i>
                                                {{ $mv->project->project_name ?? '—' }}
                                            </span>
                                            <i class="bi bi-arrow-right text-muted mx-1"></i>
                                            <span class="text-success small fw-semibold">
                                                <i class="bi bi-plus-circle"></i>
                                                {{ $mv->relatedProject->project_name ?? '—' }}
                                            </span>
                                        @else
                                            <span class="text-muted small fw-semibold">
                                                {{ $mv->relatedProject->project_name ?? '—' }}
                                            </span>
                                            <i class="bi bi-arrow-right text-muted mx-1"></i>
                                            <span class="text-success small fw-semibold">
                                                <i class="bi bi-plus-circle"></i>
                                                {{ $mv->project->project_name ?? '—' }}
                                            </span>
                                        @endif
                                    </div>
                                @else
                                    {{ $mv->project->project_name ?? '—' }}
                                @endif
                            </td>
                            <td>
                                @if($mv->isTransfer())
                                    <span class="badge bg-transfer-badge">
                                        <i class="bi bi-arrow-repeat"></i> Transfer
                                    </span>
                                @else
                                    <span class="text-muted small">{{ $mv->source_label }}</span>
                                @endif
                            </td>
                            <td class="small">{{ Str::limit($mv->notes, 40) }}</td>
                            <td>{{ $mv->createdBy->name ?? '—' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">No stock movements found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($movements->hasPages())
            <div class="card-footer">{{ $movements->links() }}</div>
        @endif
    </div>
@endsection

@push('styles')
<style>
    /* Transfer-specific badges */
    .bg-transfer-out {
        background: linear-gradient(135deg, hsl(25, 95%, 53%), hsl(15, 95%, 53%)) !important;
        color: white;
    }
    .bg-transfer-in {
        background: linear-gradient(135deg, hsl(199, 89%, 48%), hsl(210, 89%, 55%)) !important;
        color: white;
    }
    .bg-transfer-badge {
        background: linear-gradient(135deg, hsl(262, 83%, 58%), hsl(280, 83%, 55%)) !important;
        color: white;
    }

    /* Subtle highlight for transfer rows */
    .transfer-row {
        background: linear-gradient(90deg, hsla(262, 83%, 58%, 0.03), transparent) !important;
        border-left: 3px solid hsl(262, 83%, 58%);
    }
    .transfer-row:hover {
        background: linear-gradient(90deg, hsla(262, 83%, 58%, 0.06), transparent) !important;
    }

    /* Transfer direction display */
    .transfer-direction {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-wrap: wrap;
    }
</style>
@endpush