@extends('layouts.app')

@section('title', $location->name)

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

    .header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

    .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; }

    .btn-outline {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.625rem 1rem; background: transparent; color: var(--text-secondary);
        border: 1px solid var(--border); border-radius: var(--radius-md);
        font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer;
        transition: all var(--transition);
    }
    .btn-outline:hover { background: var(--bg-hover); color: var(--text-primary); }

    .btn-danger {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.5rem 0.875rem; background: transparent; color: var(--danger);
        border: 1px solid var(--danger); border-radius: var(--radius-md);
        font-size: 0.825rem; font-weight: 500; cursor: pointer; font-family: inherit;
        transition: all var(--transition);
    }
    .btn-danger:hover { background: rgba(239, 68, 68, 0.1); }

    .badge {
        display: inline-flex; align-items: center;
        padding: 0.2rem 0.55rem; border-radius: 20px;
        font-size: 0.65rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.04em;
    }
    .badge-primary { background: rgba(16, 191, 255, 0.15); color: var(--accent); }
    .badge-warehouse { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
    .badge-store { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
    .badge-pickup { background: rgba(34, 197, 94, 0.15); color: var(--success); }

    .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.qty { background: rgba(34, 197, 94, 0.15); color: var(--success); }
    .stat-card .stat-icon.low { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
    .stat-card .stat-icon.orders { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
    .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); }

    .card {
        background: var(--bg-card); border: 1px solid var(--border);
        border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem;
    }
    .card h3 {
        font-size: 0.95rem; font-weight: 600; color: var(--text-primary);
        margin-bottom: 1.25rem; padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border);
        display: flex; align-items: center; gap: 0.5rem;
    }

    .stock-form {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr auto;
        gap: 0.75rem;
        align-items: end;
    }
    .stock-form .form-group { margin: 0; }
    .stock-form label {
        display: block; font-size: 0.75rem; color: var(--text-muted);
        margin-bottom: 0.3rem;
    }
    .form-input, .form-select {
        width: 100%;
        padding: 0.55rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-secondary);
        color: var(--text-primary);
        font-family: inherit; font-size: 0.85rem; outline: none;
    }
    .form-input:focus, .form-select:focus { 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); }
    .data-table tr.low-stock { background: rgba(239, 68, 68, 0.06); }
    .data-table tr.low-stock:hover { background: rgba(239, 68, 68, 0.1); }

    .product-cell .p-name { font-weight: 600; color: var(--text-primary); }
    .product-cell .p-sku { font-size: 0.7rem; color: var(--text-muted); font-family: monospace; margin-top: 2px; }

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

    .empty-state {
        text-align: center; padding: 2.5rem 1.5rem;
        color: var(--text-muted);
    }
    .empty-state i { font-size: 2rem; margin-bottom: 0.5rem; color: var(--accent); opacity: 0.5; }

    .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); }
    .flash-error { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--danger); }

    .delete-box {
        margin-top: 1.5rem;
        padding: 1.25rem;
        background: var(--bg-card);
        border: 1px solid rgba(239, 68, 68, 0.3);
        border-radius: var(--radius-lg);
        display: flex; justify-content: space-between; align-items: center;
        flex-wrap: wrap; gap: 0.75rem;
    }
    .delete-box .label { font-weight: 600; color: var(--text-primary); font-size: 0.9rem; }
    .delete-box .hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

    @media (max-width: 900px) {
        .stock-form { grid-template-columns: 1fr 1fr; }
        .stock-form .stock-submit { grid-column: span 2; }
    }
</style>
@endpush

@section('content')
    @php
        $typeBadge = [
            'warehouse' => 'badge-warehouse',
            'store' => 'badge-store',
            'pickup_point' => 'badge-pickup',
        ][$location->type ?? 'warehouse'] ?? 'badge-warehouse';
        $typeLabel = str_replace('_', ' ', $location->type ?? 'warehouse');
    @endphp

    <div class="page-header">
        <div>
            <h1>
                {{ $location->name }}
                <span class="badge {{ $typeBadge }}">{{ $typeLabel }}</span>
                @if($location->is_primary)
                    <span class="badge badge-primary"><i class="fas fa-star" style="font-size:0.6rem;margin-right:3px;"></i>Primary</span>
                @endif
            </h1>
            @if(!empty($location->address))
                <p><i class="fas fa-map-pin"></i>{{ $location->address }}{{ $location->city ? ', '.$location->city : '' }}{{ $location->state ? ', '.$location->state : '' }}</p>
            @endif
        </div>
        <div class="header-actions">
            <a href="{{ route('inventory.locations.index') }}" class="btn-outline">
                <i class="fas fa-arrow-left"></i> Back
            </a>
            <a href="{{ route('inventory.locations.edit', $location->id) }}" class="btn-primary">
                <i class="fas fa-edit"></i> Edit
            </a>
        </div>
    </div>

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

    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon"><i class="fas fa-box"></i></div>
            <div class="stat-meta">
                <span class="stat-label">Total Products</span>
                <span class="stat-value">{{ number_format($stats['total_products'] ?? 0) }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon qty"><i class="fas fa-cubes"></i></div>
            <div class="stat-meta">
                <span class="stat-label">Total Quantity</span>
                <span class="stat-value">{{ number_format($stats['total_quantity'] ?? 0) }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon low"><i class="fas fa-exclamation-triangle"></i></div>
            <div class="stat-meta">
                <span class="stat-label">Low Stock</span>
                <span class="stat-value">{{ number_format($stats['low_stock'] ?? 0) }}</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon orders"><i class="fas fa-shopping-bag"></i></div>
            <div class="stat-meta">
                <span class="stat-label">Orders Fulfilled</span>
                <span class="stat-value">{{ number_format($stats['orders'] ?? 0) }}</span>
            </div>
        </div>
    </div>

    <div class="card">
        <h3><i class="fas fa-plus-circle"></i> Manage Stock</h3>
        <form method="POST" action="{{ route('inventory.locations.stock', $location->id) }}" class="stock-form">
            @csrf
            <div class="form-group">
                <label>Product</label>
                <select name="product_id" class="form-select" required>
                    <option value="">— Select product —</option>
                    @foreach(($products ?? []) as $product)
                        <option value="{{ $product->id }}">{{ $product->name }} @if(!empty($product->sku)) ({{ $product->sku }}) @endif</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label>Quantity</label>
                <input type="number" name="quantity" class="form-input" min="0" value="0" required>
            </div>
            <div class="form-group">
                <label>Low Stock Threshold</label>
                <input type="number" name="low_stock_threshold" class="form-input" min="0" value="5">
            </div>
            <div class="form-group">
                <label>Bin Location</label>
                <input type="text" name="bin_location" class="form-input" placeholder="e.g. A-12">
            </div>
            <div class="form-group stock-submit">
                <button type="submit" class="btn-primary">
                    <i class="fas fa-save"></i> Set
                </button>
            </div>
        </form>
    </div>

    <div class="card" style="padding:0;">
        <h3 style="padding: 1.25rem 1.5rem 0.75rem; margin: 0;"><i class="fas fa-boxes"></i> Stock at this Location</h3>

        @if(isset($stocks) && $stocks->count())
            <div class="table-container" style="border:0;border-radius:0;">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Quantity</th>
                            <th>Reserved</th>
                            <th>Available</th>
                            <th>Low Threshold</th>
                            <th>Bin</th>
                            <th>Last Restocked</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($stocks as $stock)
                            @php
                                $qty = $stock->quantity ?? 0;
                                $reserved = $stock->reserved ?? 0;
                                $available = $qty - $reserved;
                                $threshold = $stock->low_stock_threshold ?? 0;
                                $isLow = $qty <= $threshold;
                            @endphp
                            <tr class="{{ $isLow ? 'low-stock' : '' }}">
                                <td>
                                    <div class="product-cell">
                                        <div class="p-name">{{ optional($stock->product)->name ?? '—' }}</div>
                                        @if(!empty(optional($stock->product)->sku))
                                            <div class="p-sku">{{ $stock->product->sku }}</div>
                                        @endif
                                    </div>
                                </td>
                                <td><strong style="color: {{ $isLow ? 'var(--danger)' : 'var(--text-primary)' }};">{{ number_format($qty) }}</strong></td>
                                <td>{{ number_format($reserved) }}</td>
                                <td>{{ number_format($available) }}</td>
                                <td>{{ number_format($threshold) }}</td>
                                <td style="font-family:monospace;">{{ $stock->bin_location ?? '—' }}</td>
                                <td style="font-size:0.8rem;color:var(--text-muted);">
                                    {{ $stock->last_restocked_at ? \Carbon\Carbon::parse($stock->last_restocked_at)->diffForHumans() : '—' }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="pagination-wrapper">
                    {{ $stocks->withQueryString()->links() }}
                </div>
            </div>
        @else
            <div class="empty-state">
                <i class="fas fa-box-open"></i>
                <p>No stock recorded at this location yet.</p>
            </div>
        @endif
    </div>

    @if(!$location->is_primary)
        <form method="POST" action="{{ route('inventory.locations.destroy', $location->id) }}" class="delete-box"
              data-confirm="This removes the location. Stock, orders and agents tied to it remain but will lose their location link. This cannot be undone."
              data-confirm-type="danger"
              data-confirm-title="Delete location?"
              data-confirm-button="Delete location">
            @csrf
            @method('DELETE')
            <div>
                <div class="label">Delete Location</div>
                <div class="hint">Permanently remove this location and its stock records. This cannot be undone.</div>
            </div>
            <button type="submit" class="btn-danger">
                <i class="fas fa-trash"></i> Delete Location
            </button>
        </form>
    @endif
@endsection