@extends('admin.layouts.app')
@section('title','Product — '.$product->product_name)
@section('breadcrumb')
    <span>/</span> <a href="{{ route('admin.inventory.index') }}" style="color:inherit;text-decoration:none;">Inventory</a>
    <span>/</span> {{ $product->product_name }}
@endsection

@section('content')
@php
    $qty = $product->current_quantity;
    $stockColor = $qty == 0 ? 'danger' : ($qty < 10 ? 'warning' : 'success');
@endphp
<div class="page-header">
    <div>
        <h1>{{ $product->product_name }}</h1>
        <p class="page-subtitle"><code>{{ $product->product_code }}</code></p>
    </div>
    <div class="d-flex gap-2">
        @if(auth()->user()->hasPermission('products.add_stock'))
        <button class="btn btn-success" onclick="showAddStock({{ $product->id }},'{{ addslashes($product->product_name) }}',{{ $product->current_quantity }})">
            <i class="fas fa-plus-circle me-2"></i>Add Stock
        </button>
        @endif
        @if(auth()->user()->hasPermission('products.edit'))
        <a href="{{ route('admin.csr.products.edit',$product) }}" class="btn btn-primary"><i class="fas fa-edit me-2"></i>Edit</a>
        @endif
        <a href="{{ route('admin.inventory.index') }}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left me-2"></i>Back</a>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body text-center">
                @if($product->product_image)
                <img src="{{ fileUrl($product->product_image,'products') }}" style="width:100px;height:100px;border-radius:12px;object-fit:cover;margin-bottom:10px;">
                @else
                <div style="width:100px;height:100px;background:#ecfeff;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px;">
                    <i class="fas fa-box" style="font-size:34px;color:#0e7490;"></i>
                </div>
                @endif
                <h5 class="mb-0 fw-700">{{ $product->product_name }}</h5>
                <div style="font-size:12px;color:#64748b;">{{ $product->category ?? 'Uncategorized' }}</div>

                <div class="mt-3" style="background:#f8fafc;border-radius:10px;padding:12px;">
                    <div style="font-size:11px;color:#64748b;font-weight:600;text-transform:uppercase;">Current Stock</div>
                    <div class="badge bg-{{ $stockColor }}" style="font-size:20px;padding:6px 14px;">{{ $product->current_quantity }} {{ $product->unit }}</div>
                </div>

                <hr class="my-3">

                <div style="font-size:12px;text-align:left;">
                    <div class="d-flex justify-content-between py-1 border-bottom"><span class="text-muted">Product Code</span><code>{{ $product->product_code }}</code></div>
                    <div class="d-flex justify-content-between py-1 border-bottom"><span class="text-muted">Unit</span><span>{{ $product->unit ?? '—' }}</span></div>
                    <div class="d-flex justify-content-between py-1 border-bottom"><span class="text-muted">Status</span><span class="badge bg-{{ $product->status==='active'?'success':'secondary' }}">{{ ucfirst($product->status) }}</span></div>
                    <div class="d-flex justify-content-between py-1"><span class="text-muted">Added By</span><span>{{ $product->createdBy->name ?? '—' }}</span></div>
                </div>

                @if($product->description)
                <hr class="my-3">
                <p style="font-size:12px;text-align:left;color:#64748b;">{{ $product->description }}</p>
                @endif
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h6 class="mb-0 fw-700"><i class="fas fa-history text-primary me-2"></i>Recent Stock Transactions</h6>
                <a href="{{ route('admin.csr.products.stock-history',$product) }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead style="background:#f8fafc;">
                        <tr><th class="ps-3">Type</th><th>Quantity</th><th>Before</th><th>After</th><th>Description</th><th>Date</th></tr>
                    </thead>
                    <tbody>
                        @forelse($product->stockTransactions->take(5) as $tx)
                        <tr>
                            <td class="ps-3"><span class="badge bg-{{ $tx->type_color }}">{{ ucfirst(str_replace('_',' ',$tx->transaction_type)) }}</span></td>
                            <td style="font-weight:700;">{{ $tx->quantity }}</td>
                            <td>{{ $tx->previous_quantity }}</td>
                            <td>{{ $tx->new_quantity }}</td>
                            <td style="font-size:12px;">{{ $tx->description ?? '—' }}</td>
                            <td style="font-size:12px;color:#64748b;">{{ $tx->created_at->format('d M Y') }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="6" class="text-center py-4 text-muted">No stock transactions yet</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Add Stock Modal -->
<div class="modal fade" id="addStockModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" style="border-radius:16px;border:none;box-shadow:0 20px 60px rgba(0,0,0,.2);">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-700"><i class="fas fa-plus-circle text-success me-2"></i>Add Stock</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted" style="font-size:13px;">Product: <strong id="stockProductName"></strong></p>
                <div class="mb-2" style="background:#f0fdf4;border-radius:8px;padding:10px;text-align:center;">
                    <div style="font-size:11px;color:#16a34a;font-weight:600;">Current Stock</div>
                    <div style="font-size:22px;font-weight:700;" id="currentStockDisplay">0</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Quantity to Add <span class="text-danger">*</span></label>
                    <input type="number" id="stockQty" class="form-control" min="1" placeholder="Enter quantity">
                </div>
                <div class="mb-0">
                    <label class="form-label">Description</label>
                    <input type="text" id="stockDesc" class="form-control" placeholder="Optional note">
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-success btn-sm" onclick="submitAddStock()" id="stockSubmitBtn">
                    <i class="fas fa-plus me-1"></i>Add Stock
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let stockProductId = null;

function showAddStock(id, name, current) {
    stockProductId = id;
    document.getElementById('stockProductName').textContent    = name;
    document.getElementById('currentStockDisplay').textContent = current;
    document.getElementById('stockQty').value  = '';
    document.getElementById('stockDesc').value = '';
    new bootstrap.Modal(document.getElementById('addStockModal')).show();
}

function submitAddStock() {
    const qty  = parseInt(document.getElementById('stockQty').value);
    const desc = document.getElementById('stockDesc').value;
    const btn  = document.getElementById('stockSubmitBtn');

    if (!qty || qty < 1) { toastr.error('Enter a valid quantity.'); return; }

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';

    fetch(`/admin/csr/products/${stockProductId}/add-stock`, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
        body: JSON.stringify({ quantity: qty, description: desc })
    })
    .then(r => r.json())
    .then(d => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-plus me-1"></i>Add Stock';
        if (d.success) {
            bootstrap.Modal.getInstance(document.getElementById('addStockModal')).hide();
            toastr.success(d.message);
            setTimeout(() => location.reload(), 1000);
        } else {
            toastr.error(d.message || 'Failed to add stock.');
        }
    })
    .catch(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-plus me-1"></i>Add Stock';
        toastr.error('Network error.');
    });
}
</script>
@endpush