<x-app-layout>
    <x-slot name="header">
        <h2 class="serif" style="font-size: 1.3rem; color: var(--cream); font-weight: 400; letter-spacing: 0.05em;">
            {{ __('Admin / Manage Stock') }}: {{ $product->name }}
        </h2>
    </x-slot>

    <style>
        .form-card {
            background: #fff;
            border-radius: 4px;
            border: 1px solid rgba(26,24,20,0.08);
            padding: 2.5rem;
            margin-bottom: 3rem;
        }
        .form-group { margin-bottom: 1.5rem; }
        .form-label {
            display: block;
            font-size: 0.7rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--warm-gray);
            font-weight: 600;
            margin-bottom: 0.6rem;
        }
        .form-input {
            width: 100%;
            padding: 0.8rem 1rem;
            background: var(--ivory);
            border: 1px solid rgba(26,24,20,0.08);
            border-radius: 2px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.9rem;
            color: var(--ink);
            transition: border-color 0.2s;
        }
        .form-input:focus {
            outline: none;
            border-color: var(--amber);
        }
        .btn-save {
            background: var(--charcoal);
            color: var(--cream);
            border: none;
            border-radius: 2px;
            padding: 0.8rem 1.5rem;
            font-size: 0.75rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-save:hover {
            background: var(--amber);
            color: var(--charcoal);
        }

        .admin-table-container {
            background: #fff;
            border-radius: 4px;
            border: 1px solid rgba(26,24,20,0.08);
            overflow: hidden;
        }
        .admin-table { width: 100%; border-collapse: collapse; text-align: left; }
        .admin-table th {
            background: var(--ivory);
            padding: 1rem 1.5rem;
            font-size: 0.65rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--warm-gray);
            font-weight: 600;
            border-bottom: 1px solid rgba(26,24,20,0.06);
        }
        .admin-table td {
            padding: 1rem 1.5rem;
            font-size: 0.85rem;
            color: var(--ink);
            border-bottom: 1px solid rgba(26,24,20,0.04);
            vertical-align: middle;
        }
        .type-badge {
            font-size: 0.65rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-weight: 600;
            padding: 0.25rem 0.6rem;
            border-radius: 2px;
        }
        .badge-positive { background: rgba(74, 124, 89, 0.1); color: var(--success); }
        .badge-negative { background: rgba(165, 82, 63, 0.1); color: var(--terracotta); }
    </style>

    <div style="padding: 4rem 0 8rem;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
                
                <!-- Stock Adjustment Form -->
                <div class="lg:col-span-1">
                    <div class="form-card">
                        <h3 class="serif" style="font-size: 1.2rem; color: var(--charcoal); margin-bottom: 2rem; font-weight: 500;">Update Stock</h3>
                        <form action="{{ route('admin.stock.update', $product) }}" method="POST">
                            @csrf
                            <div class="form-group">
                                <label class="form-label">Adjustment Type</label>
                                <select name="type" class="form-input" required>
                                    <option value="receive">Receive (Stock In)</option>
                                    <option value="out">Damage / Loss (Stock Out)</option>
                                    <option value="return">Customer Return</option>
                                    <option value="adjustment">Inventory Adjustment</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Quantity</label>
                                <input type="number" name="quantity" min="1" class="form-input" placeholder="Enter amount..." required>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Notes</label>
                                <textarea name="notes" rows="3" class="form-input" placeholder="Optional explanation..."></textarea>
                            </div>
                            <div style="margin-top: 2rem;">
                                <button type="submit" class="btn-save" style="width: 100%;">Record Movement</button>
                            </div>
                        </form>
                        
                        <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(26,24,20,0.08);">
                            <div class="form-label">Current Status</div>
                            <div style="font-size: 1.5rem; font-family: 'Cormorant Garamond', serif; font-weight: 700; color: var(--charcoal);">
                                {{ $product->stock }} <span style="font-size: 0.8rem; font-family: 'DM Sans', sans-serif; font-weight: 400; color: var(--warm-gray);">units in hand</span>
                            </div>
                        </div>
                    </div>
                    
                    <a href="{{ route('admin.stock.index') }}" style="color: var(--warm-gray); text-decoration: none; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;">← Back to Inventory</a>
                </div>

                <!-- Stock History -->
                <div class="lg:col-span-2">
                    <h3 class="serif" style="font-size: 1.2rem; color: var(--charcoal); margin-bottom: 1.5rem; font-weight: 500;">Movement History</h3>
                    <div class="admin-table-container">
                        <table class="admin-table">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Type</th>
                                    <th>Qty</th>
                                    <th>User</th>
                                    <th>Notes</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($movements as $movement)
                                    <tr>
                                        <td style="white-space: nowrap; color: var(--warm-gray);">
                                            {{ $movement->created_at->format('M d, Y') }}
                                            <div style="font-size: 0.7rem;">{{ $movement->created_at->format('H:i') }}</div>
                                        </td>
                                        <td>
                                            <span class="type-badge {{ in_array($movement->type, ['receive', 'return']) || ($movement->type == 'adjustment' && $movement->quantity > 0) ? 'badge-positive' : 'badge-negative' }}">
                                                {{ str_replace('_', ' ', $movement->type) }}
                                            </span>
                                        </td>
                                        <td style="font-weight: 600; color: {{ $movement->quantity > 0 ? 'var(--success)' : 'var(--terracotta)' }}">
                                            {{ $movement->quantity > 0 ? '+' : '' }}{{ $movement->quantity }}
                                        </td>
                                        <td>
                                            <div style="font-weight: 500;">{{ $movement->user?->name ?? 'System' }}</div>
                                            @if($movement->reference)
                                                <div style="font-size: 0.7rem; color: var(--mist);">{{ $movement->reference }}</div>
                                            @endif
                                        </td>
                                        <td style="max-width: 200px; font-size: 0.8rem; color: var(--warm-gray);">
                                            {{ $movement->notes }}
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" style="text-align: center; padding: 3rem; color: var(--mist);">No movements recorded yet.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    <div style="margin-top: 2rem;">
                        {{ $movements->links() }}
                    </div>
                </div>

            </div>
        </div>
    </div>
</x-app-layout>
