@extends('admin.layouts.inventory')

@section('title', 'Stock')

@push('head')
    <style>
        .stock-locations-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--surface);
            color: var(--text-muted);
            cursor: pointer;
            padding: 0;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
        }
        .stock-locations-btn:hover {
            background: var(--surface-hover);
            color: var(--accent);
            border-color: var(--accent);
        }
        .stock-locations-btn svg { display: block; }

        .stock-dialog {
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 0;
            max-width: 36rem;
            width: calc(100% - 2rem);
            background: var(--surface);
            color: var(--text);
            box-shadow: var(--shadow-lg);
        }
        .stock-dialog::backdrop {
            background: rgba(2, 6, 23, 0.65);
        }
        .stock-dialog-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            padding: 1.1rem 1.25rem;
            border-bottom: 1px solid var(--border);
        }
        .stock-dialog-header h3 {
            margin: 0;
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-strong);
        }
        .stock-dialog-header p {
            margin: 0.25rem 0 0;
            font-size: 0.82rem;
            color: var(--text-muted);
        }
        .stock-dialog-body { padding: 0.5rem 1.25rem 1.25rem; }
        .stock-dialog-body table { margin-top: 0.5rem; }
        .stock-dialog-close {
            border: 0;
            background: transparent;
            color: var(--text-muted);
            font-size: 1.25rem;
            line-height: 1;
            cursor: pointer;
            padding: 0.15rem 0.35rem;
            border-radius: 6px;
        }
        .stock-dialog-close:hover { background: var(--surface-hover); color: var(--text-strong); }
    </style>
@endpush

@section('content')
    <div class="page-header">
        <h2>Stock positions</h2>
    </div>

    @include('admin.inventory.partials.filter_bar', ['filters' => $filters])

    <div class="box">
        @if (($skus ?? collect())->isEmpty())
            <p class="empty">
                {{ $filters->isActive() ? 'No stock positions match these filters.' : 'No stock positions recorded.' }}
            </p>
        @else
            <table>
                <thead>
                    <tr>
                        <th>Item / SKU</th>
                        <th>Warehouse qty</th>
                        <th style="width: 4rem;">Locations</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($skus as $sku)
                        @php
                            $item = $sku->variant?->item;
                            $variant = $sku->variant?->variant;
                        @endphp
                        <tr>
                            <td>
                                <div class="sku-cell-main"><code>{{ $sku->sku_code }}</code></div>
                                @if ($item?->name || $variant)
                                    <div class="sku-cell-sub">
                                        {{ $item?->name ?? '' }}
                                        @if ($variant)
                                            <span class="muted">— {{ $variant }}</span>
                                        @endif
                                    </div>
                                @endif
                            </td>
                            <td>@qty($sku->warehouse_qty ?? 0, $sku)</td>
                            <td>
                                <button
                                    type="button"
                                    class="stock-locations-btn"
                                    title="View stock locations"
                                    aria-label="View stock locations for {{ $sku->sku_code }}"
                                    onclick="document.getElementById('stock-locations-{{ $sku->id }}').showModal()"
                                >
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                        <circle cx="12" cy="10" r="3"></circle>
                                    </svg>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            @include('admin.inventory.partials.pagination', ['paginator' => $skus])
        @endif
    </div>

    @foreach ($skus ?? [] as $sku)
        @php
            $item = $sku->variant?->item;
            $variant = $sku->variant?->variant;
            $itemLabel = trim(($item?->name ?? '').($variant ? ' — '.$variant : ''));
        @endphp
        <dialog id="stock-locations-{{ $sku->id }}" class="stock-dialog">
            <div class="stock-dialog-header">
                <div>
                    <h3><code>{{ $sku->sku_code }}</code></h3>
                    @if ($itemLabel !== '')
                        <p>{{ $itemLabel }}</p>
                    @endif
                </div>
                <button type="button" class="stock-dialog-close" onclick="this.closest('dialog').close()" aria-label="Close">&times;</button>
            </div>
            <div class="stock-dialog-body">
                <p class="muted" style="margin: 0;">Warehouse qty: <strong style="color: var(--text-strong);">@qty($sku->warehouse_qty ?? 0, $sku)</strong></p>
                <p class="muted" style="margin: 0.35rem 0 0;">Total inward qty: <strong style="color: var(--text-strong);">@qty($sku->total_inward_qty ?? 0, $sku)</strong></p>
                @if ($sku->stockPositions->isEmpty())
                    <p class="empty">No location breakdown available.</p>
                @else
                    <table>
                        <thead>
                            <tr>
                                <th>Location</th>
                                <th>Status</th>
                                <th>Qty</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($sku->stockPositions as $position)
                                <tr>
                                    <td>{{ $position->locationLabel() }}</td>
                                    <td>{{ $position->inventory_status?->value ?? '—' }}</td>
                                    <td>@qty($position->qty, $sku)</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </dialog>
    @endforeach
@endsection