@extends('layouts.app')

@section('title', 'Stock Transfers')

@push('styles')
<style>
    .page-header {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;
    }
    .page-header h1 { font-size: 1.5rem; font-weight: 700; }
    .page-header p { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.25rem; }

    .btn-primary {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.625rem 1rem; background: var(--accent); color: #fff;
        border: 1px solid var(--accent); border-radius: var(--radius-md);
        font-size: 0.875rem; font-weight: 500; font-family: inherit;
        text-decoration: none; cursor: pointer; transition: opacity var(--transition);
    }
    .btn-primary:hover { opacity: 0.9; }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 1rem; margin-bottom: 1.5rem;
    }
    .stat-card {
        background: var(--bg-card); border: 1px solid var(--border);
        border-radius: var(--radius-lg); padding: 1.25rem;
        display: flex; align-items: center; gap: 1rem;
    }
    .stat-card .stat-icon {
        width: 44px; height: 44px; min-width: 44px;
        border-radius: var(--radius-md);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 1.1rem;
        background: rgba(16, 191, 255, 0.12); color: var(--accent);
    }
    .stat-card .stat-icon.pending { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
    .stat-card .stat-icon.in-transit { background: rgba(16, 191, 255, 0.12); color: var(--accent); }
    .stat-card .stat-icon.received { background: rgba(34, 197, 94, 0.15); color: var(--success); }
    .stat-card .stat-meta { display: flex; flex-direction: column; }
    .stat-card .stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
    .stat-card .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }

    .filter-bar {
        display: flex; align-items: center; gap: 0.75rem;
        margin-bottom: 1.5rem; flex-wrap: wrap;
    }
    .filter-bar .search-input {
        flex: 1; min-width: 200px; max-width: 320px; position: relative;
    }
    .filter-bar .search-input input {
        width: 100%; padding: 0.625rem 1rem 0.625rem 2.5rem;
        border: 1px solid var(--border); border-radius: var(--radius-md);
        background: var(--bg-card); color: var(--text-primary);
        font-family: inherit; font-size: 0.875rem; outline: none;
    }
    .filter-bar .search-input input:focus { border-color: var(--accent); }
    .filter-bar .search-input i {
        position: absolute; left: 0.875rem; top: 50%;
        transform: translateY(-50%); color: var(--text-muted); font-size: 0.875rem;
    }
    .filter-bar select {
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--border); border-radius: var(--radius-md);
        background: var(--bg-card); color: var(--text-primary);
        font-family: inherit; font-size: 0.875rem; outline: none; cursor: pointer;
    }
    .filter-bar select:focus { border-color: var(--accent); }

    .action-btn {
        background: var(--bg-hover); border: 1px solid var(--border);
        color: var(--text-secondary); padding: 0.375rem 0.625rem;
        border-radius: var(--radius-sm); font-size: 0.8rem; cursor: pointer;
        transition: all var(--transition);
        display: inline-flex; align-items: center; gap: 0.375rem;
        font-family: inherit; text-decoration: none; margin-right: 0.25rem;
    }
    .action-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }

    .table-container {
        background: var(--bg-card); border: 1px solid var(--border);
        border-radius: var(--radius-lg); overflow-x: auto;
    }
    .data-table { width: 100%; border-collapse: collapse; }
    .data-table th {
        text-align: left; padding: 0.75rem 1.25rem;
        font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
        color: var(--text-muted); border-bottom: 1px solid var(--border);
        background: var(--bg-secondary);
    }
    .data-table td {
        padding: 0.875rem 1.25rem; font-size: 0.875rem;
        border-bottom: 1px solid var(--border); color: var(--text-secondary);
        vertical-align: middle;
    }
    .data-table tbody tr:hover { background: var(--bg-hover); }

    .transfer-ref {
        font-family: monospace; font-weight: 600; color: var(--text-primary);
    }

    .transfer-route {
        display: inline-flex; align-items: center; gap: 0.5rem; line-height: 1.2;
    }
    .transfer-route .loc { color: var(--text-primary); font-weight: 500; }
    .transfer-route .arr { color: var(--text-muted); font-size: 0.75rem; }

    .badge-status {
        display: inline-flex; align-items: center;
        padding: 0.25rem 0.625rem; border-radius: 20px;
        font-size: 0.7rem; font-weight: 600; text-transform: capitalize;
    }
    .badge-pending { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
    .badge-in-transit { background: rgba(16, 191, 255, 0.15); color: var(--accent); }
    .badge-received { background: rgba(34, 197, 94, 0.15); color: var(--success); }
    .badge-cancelled { background: rgba(99, 110, 114, 0.18); color: var(--text-muted); }

    .pagination-wrapper { display: flex; justify-content: center; padding: 1.5rem; }

    .empty-state {
        text-align: center; padding: 3rem 1.5rem;
        color: var(--text-muted);
        background: var(--bg-card); border: 1px solid var(--border);
        border-radius: var(--radius-lg);
    }
    .empty-state i { font-size: 2.5rem; margin-bottom: 0.75rem; color: var(--accent); opacity: 0.5; }
    .empty-state h3 { font-size: 1rem; color: var(--text-primary); margin-bottom: 0.5rem; }
    .empty-state p { font-size: 0.85rem; margin-bottom: 1rem; }

    .flash-message {
        padding: 0.875rem 1rem; border-radius: var(--radius-md);
        margin-bottom: 1rem; font-size: 0.875rem;
        display: flex; align-items: center; gap: 0.5rem;
    }
    .flash-success { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.3); color: var(--success); }

    @media (max-width: 768px) {
        .filter-bar { flex-direction: column; align-items: stretch; }
        .filter-bar .search-input { max-width: 100%; }
        .data-table th, .data-table td { padding: 0.625rem 0.75rem; }
    }
</style>
@endpush

@section('content')
    <div class="page-header">
        <div>
            <h1>Stock Transfers</h1>
            <p>Move stock between locations and track incoming and outgoing shipments.</p>
        </div>
        <a href="{{ route('inventory.transfers.create') }}" class="btn-primary">
            <i class="fas fa-plus"></i> New Transfer
        </a>
    </div>

    @if(session('success'))
        <div class="flash-message flash-success">
            <i class="fas fa-check-circle"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-exchange-alt"></i></div>
            <div class="stat-meta">
                <span class="stat-label">Total</span>
                <span class="stat-value">{{ number_format($stats['total'] ?? 0) }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon pending"><i class="fas fa-hourglass-half"></i></div>
            <div class="stat-meta">
                <span class="stat-label">Pending</span>
                <span class="stat-value">{{ number_format($stats['pending'] ?? 0) }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon in-transit"><i class="fas fa-truck"></i></div>
            <div class="stat-meta">
                <span class="stat-label">In Transit</span>
                <span class="stat-value">{{ number_format($stats['in_transit'] ?? 0) }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon received"><i class="fas fa-check-double"></i></div>
            <div class="stat-meta">
                <span class="stat-label">Received</span>
                <span class="stat-value">{{ number_format($stats['received'] ?? 0) }}</span>
            </div>
        </div>
    </div>

    <form method="GET" action="{{ route('inventory.transfers.index') }}" class="filter-bar">
        <div class="search-input">
            <i class="fas fa-search"></i>
            <input type="text" name="q" placeholder="Search reference, notes..." value="{{ request('q') }}">
        </div>
        <select name="status" onchange="this.form.submit()">
            <option value="">All Status</option>
            <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
            <option value="in_transit" {{ request('status') === 'in_transit' ? 'selected' : '' }}>In Transit</option>
            <option value="received" {{ request('status') === 'received' ? 'selected' : '' }}>Received</option>
            <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
        </select>
        <button type="submit" class="action-btn"><i class="fas fa-filter"></i> Apply</button>
    </form>

    @if(isset($transfers) && $transfers->count())
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Reference</th>
                        <th>Route</th>
                        <th>Items</th>
                        <th>Initiated By</th>
                        <th>Initiated At</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($transfers as $transfer)
                        @php
                            $status = $transfer->status ?? 'pending';
                            $badgeMap = [
                                'pending' => 'badge-pending',
                                'in_transit' => 'badge-in-transit',
                                'received' => 'badge-received',
                                'cancelled' => 'badge-cancelled',
                            ];
                            $badgeClass = $badgeMap[$status] ?? 'badge-pending';
                            $itemsCount = $transfer->items_count ?? (method_exists($transfer, 'items') ? $transfer->items()->count() : (isset($transfer->items) ? $transfer->items->count() : 0));
                        @endphp
                        <tr>
                            <td><span class="transfer-ref">{{ $transfer->reference ?? ('#'.$transfer->id) }}</span></td>
                            <td>
                                <span class="transfer-route">
                                    <span class="loc">{{ optional($transfer->fromLocation)->name ?? '—' }}</span>
                                    <span class="arr"><i class="fas fa-arrow-right"></i></span>
                                    <span class="loc">{{ optional($transfer->toLocation)->name ?? '—' }}</span>
                                </span>
                            </td>
                            <td>{{ number_format($itemsCount) }} items</td>
                            <td>{{ optional($transfer->initiator)->name ?? '—' }}</td>
                            <td style="font-size:0.8rem;color:var(--text-muted);">
                                {{ $transfer->created_at ? $transfer->created_at->format('M d, Y H:i') : '—' }}
                            </td>
                            <td>
                                <span class="badge-status {{ $badgeClass }}">{{ str_replace('_', ' ', $status) }}</span>
                            </td>
                            <td>
                                <a href="{{ route('inventory.transfers.show', $transfer->id) }}" class="action-btn" title="View">
                                    <i class="fas fa-eye"></i> View
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="pagination-wrapper">
                {{ $transfers->withQueryString()->links() }}
            </div>
        </div>
    @else
        <div class="empty-state">
            <i class="fas fa-exchange-alt"></i>
            <h3>No transfers yet</h3>
            <p>Create a stock transfer to move inventory between your locations.</p>
            <a href="{{ route('inventory.transfers.create') }}" class="btn-primary">
                <i class="fas fa-plus"></i> New Transfer
            </a>
        </div>
    @endif
@endsection