@extends('layouts.app')
@section('title',$product->name)@section('page-title','Product Detail')
@section('content')
<div class="page-header d-flex align-items-start justify-content-between">
    <div>
        <nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('products.index') }}">Products</a></li><li class="breadcrumb-item active">{{ $product->sku }}</li></ol></nav>
        <h1>{{ $product->name }}</h1>
        <div class="d-flex align-items-center gap-2 mt-1">
            @if(auth()->user()->isAdmin())<span style="font-size:12px;font-family:monospace;background:rgba(46,196,182,.1);color:var(--accent);padding:2px 8px;border-radius:6px;font-weight:700;">{{ $product->branch?->code }}</span>@endif
            <span class="cat-dot" style="background:{{ $product->category?->color ?? '#999' }}"></span>
            <span style="font-size:13px;color:var(--text-muted-c)">{{ $product->category?->name }}</span>
        </div>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('products.edit',$product) }}" class="btn btn-outline-secondary"><i class="bi bi-pencil me-1"></i>Edit</a>
    </div>
</div>
<div class="row g-4">
<div class="col-12 col-xl-8">
    <div class="card mb-4"><div class="card-body p-4">
        <div class="row g-3 mb-4">
            <div class="col-md-3 text-center p-3 rounded-3" style="background:{{ $product->isOutOfStock()?'rgba(239,71,111,.08)':($product->isLowStock()?'rgba(255,209,102,.1)':'rgba(6,214,160,.08)') }}">
                <div style="font-size:36px;font-weight:800;color:{{ $product->isOutOfStock()?'#EF476F':($product->isLowStock()?'#B45309':'#06D6A0') }}">{{ number_format($product->quantity_in_stock) }}</div>
                <div style="font-size:12px;color:var(--text-muted-c)">{{ $product->unit }} in stock</div>
                <div class="mt-1">
                    @if($product->isOutOfStock())<span class="badge-status badge-cancelled">Out of Stock</span>
                    @elseif($product->isLowStock())<span class="badge-status badge-pending">Low Stock</span>
                    @else<span class="badge-status badge-completed">In Stock</span>@endif
                </div>
            </div>
            <div class="col-md-3 text-center p-3 rounded-3" style="background:var(--page-bg)"><div style="font-size:22px;font-weight:700">${{ number_format($product->selling_price_usd,4) }}</div><div style="font-size:12px;color:var(--text-muted-c)">Selling Price USD</div></div>
            <div class="col-md-3 text-center p-3 rounded-3" style="background:var(--page-bg)"><div style="font-size:22px;font-weight:700">LRD {{ number_format($product->selling_price_local,2) }}</div><div style="font-size:12px;color:var(--text-muted-c)">Selling Price LRD</div></div>
            <div class="col-md-3 text-center p-3 rounded-3" style="background:var(--page-bg)"><div style="font-size:22px;font-weight:700;color:{{ $product->profit_margin >= 20?'#06D6A0':'var(--brand)' }}">{{ $product->profit_margin }}%</div><div style="font-size:12px;color:var(--text-muted-c)">Gross Margin</div></div>
        </div>
        <button class="btn btn-brand" data-bs-toggle="modal" data-bs-target="#adjustModal"><i class="bi bi-arrow-left-right me-1"></i>Adjust Stock</button>
    </div></div>

    <div class="card"><div class="card-body p-0">
        <div class="p-4 pb-2"><h6 class="fw-700" style="font-family:'Space Grotesk',sans-serif;">Stock Movement History</h6></div>
        <div class="table-responsive">
        <table class="table mb-0">
            <thead><tr><th class="ps-4">Date</th><th>Type</th><th>Reference</th><th class="text-end">Qty</th><th class="text-end pe-4">By</th></tr></thead>
            <tbody>
            @forelse($product->stockMovements as $mv)
            <tr>
                <td class="ps-4" style="font-size:12px;color:var(--text-muted-c)">{{ $mv->created_at->format('M j, Y H:i') }}</td>
                <td><span class="badge-status badge-{{ in_array($mv->type,['sale','adjustment']) && $mv->quantity<0?'cancelled':'completed' }}" style="font-size:10px;">{{ $mv->type }}</span></td>
                <td style="font-size:13px;">{{ $mv->reference ?? $mv->notes ?? '—' }}</td>
                <td class="text-end fw-700" style="color:{{ $mv->quantity>0?'#06D6A0':'var(--danger-c)' }}">{{ $mv->quantity>0?'+':'' }}{{ number_format($mv->quantity) }}</td>
                <td class="text-end pe-4" style="font-size:12px;color:var(--text-muted-c)">{{ $mv->user?->name ?? '—' }}</td>
            </tr>
            @empty
            <tr><td colspan="5" class="text-center py-4 text-muted">No movements recorded.</td></tr>
            @endforelse
            </tbody>
        </table>
        </div>
    </div></div>
</div>
<div class="col-12 col-xl-4">
    <div class="card"><div class="card-body p-4">
        <h6 class="fw-700 mb-3" style="font-family:'Space Grotesk',sans-serif;">Product Info</h6>
        <div class="d-flex justify-content-between mb-2" style="font-size:13px;"><span class="text-muted">SKU</span><strong style="font-family:monospace">{{ $product->sku }}</strong></div>
        <div class="d-flex justify-content-between mb-2" style="font-size:13px;"><span class="text-muted">Branch</span><strong>{{ $product->branch?->name ?? '—' }}</strong></div>
        <div class="d-flex justify-content-between mb-2" style="font-size:13px;"><span class="text-muted">Supplier</span><strong>{{ $product->supplier?->name ?? '—' }}</strong></div>
        <div class="d-flex justify-content-between mb-2" style="font-size:13px;"><span class="text-muted">Reorder Level</span><strong>{{ $product->reorder_level }}</strong></div>
        <div class="d-flex justify-content-between mb-2" style="font-size:13px;"><span class="text-muted">Cost (USD)</span><strong>${{ number_format($product->cost_price_usd,4) }}</strong></div>
        <div class="d-flex justify-content-between" style="font-size:13px;"><span class="text-muted">Exchange Rate</span><strong>{{ $product->exchange_rate }}</strong></div>
    </div></div>
</div>
</div>

<div class="modal fade" id="adjustModal" tabindex="-1">
    <div class="modal-dialog"><div class="modal-content" style="border-radius:16px;border:1px solid var(--border-c);background:var(--card-bg)">
        <div class="modal-header" style="border-bottom:1px solid var(--border-c)"><h5 class="modal-title fw-700">Adjust Stock</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <form action="{{ route('products.adjust',$product) }}" method="POST">
            @csrf
            <div class="modal-body p-4">
                <div class="mb-3"><label class="form-label">Adjustment Type</label><select name="type" class="form-select"><option value="add">➕ Add Stock</option><option value="remove">➖ Remove Stock</option></select></div>
                <div class="mb-3"><label class="form-label">Quantity</label><input type="number" name="quantity" class="form-control" min="1" value="1" required></div>
                <div class="mb-0"><label class="form-label">Reason / Notes</label><textarea name="notes" class="form-control" rows="2" placeholder="e.g. Stock count correction, damage..."></textarea></div>
            </div>
            <div class="modal-footer" style="border-top:1px solid var(--border-c)">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-brand">Save Adjustment</button>
            </div>
        </form>
    </div></div>
</div>
@endsection