@extends('layouts.app')

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

@section('actions')
    <a href="{{ route('products.index') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left"></i> Back
    </a>
    <a href="{{ route('products.edit', $product) }}" class="btn btn-warning">
        <i class="fas fa-edit"></i> Edit
    </a>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            @endif
            
            @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            @endif
            
            <!-- Product Details -->
            <div class="row">
                <!-- Left Column: Product Info -->
                <div class="col-md-5">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">Product Information</h5>
                        </div>
                        <div class="card-body">
                            <div class="text-center mb-4">
                                @if($product->image)
                                <img src="{{ asset('storage/' . $product->image) }}" 
                                     alt="{{ $product->name }}" 
                                     class="img-fluid rounded" 
                                     style="max-height: 300px;">
                                @else
                                <div class="product-image-placeholder bg-light rounded d-flex align-items-center justify-content-center" 
                                     style="height: 300px; font-size: 3rem; color: #6c757d;">
                                    <i class="fas fa-box"></i>
                                </div>
                                @endif
                            </div>
                            
                            <div class="product-details">
                                <div class="detail-item">
                                    <strong><i class="fas fa-id-card"></i> Product Code:</strong>
                                    <span>{{ $product->code }}</span>
                                </div>
                                
                                <div class="detail-item">
                                    <strong><i class="fas fa-tag"></i> Name:</strong>
                                    <span>{{ $product->name }}</span>
                                </div>
                                
                                <div class="detail-item">
                                    <strong><i class="fas fa-cube"></i> Model:</strong>
                                    <span>{{ $product->model ?? 'N/A' }}</span>
                                </div>
                                
                                @if($product->category)
                                <div class="detail-item">
                                    <strong><i class="fas fa-folder"></i> Category:</strong>
                                    <span>{{ $product->category->name }}</span>
                                </div>
                                @endif
                                
                                <div class="detail-item">
                                    <strong><i class="fas fa-info-circle"></i> Description:</strong>
                                    <p class="mb-0">{{ $product->description ?? 'No description available' }}</p>
                                </div>
                                
                                @if($product->specifications)
                                <div class="detail-item">
                                    <strong><i class="fas fa-list-alt"></i> Specifications:</strong>
                                    <p class="mb-0">{{ $product->specifications }}</p>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    
                    <!-- Supplier Info -->
                    @if($product->supplier)
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">Supplier Information</h5>
                        </div>
                        <div class="card-body">
                            <p class="mb-1"><strong>Name:</strong> {{ $product->supplier->name }}</p>
                            <p class="mb-1"><strong>Phone:</strong> {{ $product->supplier->phone }}</p>
                            <p class="mb-1"><strong>Email:</strong> {{ $product->supplier->email ?? 'N/A' }}</p>
                            <p class="mb-0"><strong>Address:</strong> {{ $product->supplier->address ?? 'N/A' }}</p>
                        </div>
                    </div>
                    @endif
                </div>
                
                <!-- Right Column: Pricing & Stock -->
                <div class="col-md-7">
                    <!-- Pricing Card -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">Pricing Information</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="pricing-item text-center p-3 mb-3 border rounded">
                                        <h6 class="text-muted">Cost Price</h6>
                                        <h3 class="text-primary">৳{{ number_format($product->cost_price, 2) }}</h3>
                                        <small class="text-muted">Per unit</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="pricing-item text-center p-3 mb-3 border rounded">
                                        <h6 class="text-muted">Selling Price</h6>
                                        <h3 class="text-success">৳{{ number_format($product->selling_price, 2) }}</h3>
                                        <small class="text-muted">Per unit</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <p><strong>Profit Margin:</strong> 
                                        @php
                                            $margin = $product->selling_price - $product->cost_price;
                                            $marginPercent = $product->cost_price > 0 ? ($margin / $product->cost_price) * 100 : 0;
                                        @endphp
                                        <span class="{{ $marginPercent >= 0 ? 'text-success' : 'text-danger' }}">
                                            {{ number_format($marginPercent, 2) }}%
                                            (৳{{ number_format($margin, 2) }})
                                        </span>
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <p><strong>Tax Rate:</strong> {{ $product->tax_rate ?? 0 }}%</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Stock Information -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">Stock Information</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="stock-item text-center p-3 mb-3 border rounded">
                                        <h6 class="text-muted">Current Stock</h6>
                                        <h2 class="{{ $product->stock_quantity <= $product->alert_quantity ? 'text-danger' : 'text-success' }}">
                                            {{ $product->stock_quantity }}
                                        </h2>
                                        <small class="text-muted">Units</small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="stock-item text-center p-3 mb-3 border rounded">
                                        <h6 class="text-muted">Alert Quantity</h6>
                                        <h3 class="text-warning">{{ $product->alert_quantity ?? 10 }}</h3>
                                        <small class="text-muted">Reorder level</small>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="stock-item text-center p-3 mb-3 border rounded">
                                        <h6 class="text-muted">Stock Value</h6>
                                        <h3 class="text-info">
                                            ৳{{ number_format($product->stock_quantity * $product->cost_price, 2) }}
                                        </h3>
                                        <small class="text-muted">Total value</small>
                                    </div>
                                </div>
                            </div>
                            
                            @if($product->stock_quantity <= $product->alert_quantity)
                            <div class="alert alert-warning">
                                <i class="fas fa-exclamation-triangle"></i> 
                                <strong>Low Stock Alert!</strong> Stock is below minimum level. Consider reordering.
                            </div>
                            @endif
                            
                            <!-- Stock Update Form -->
                            <div class="mt-4">
                                <h6>Update Stock</h6>
                                <form method="POST" action="{{ route('products.update-stock', $product) }}" class="row">
                                    @csrf
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="adjustment_type">Adjustment Type</label>
                                            <select name="adjustment_type" id="adjustment_type" class="form-control" required>
                                                <option value="add">Add Stock</option>
                                                <option value="subtract">Remove Stock</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="quantity">Quantity</label>
                                            <input type="number" name="quantity" id="quantity" 
                                                   class="form-control" min="1" required>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>&nbsp;</label>
                                            <button type="submit" class="btn btn-primary btn-block">
                                                Update
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="reason">Reason</label>
                                            <textarea name="reason" id="reason" class="form-control" rows="2"></textarea>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Sales & Purchase History -->
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">Recent Activity</h5>
                                <div>
                                    <a href="{{ route('products.stock-history', $product) }}" class="btn btn-sm btn-info">
                                        <i class="fas fa-history"></i> Full History
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Recent Sales</h6>
                                    @if($recentSales && $recentSales->count() > 0)
                                    <div class="list-group">
                                        @foreach($recentSales as $saleItem)
                                        <a href="{{ route('sales.show', $saleItem->sale_id) }}" 
                                           class="list-group-item list-group-item-action">
                                            <div class="d-flex justify-content-between">
                                                <span>{{ $saleItem->sale->invoice_number ?? 'N/A' }}</span>
                                                <span class="text-success">-{{ $saleItem->quantity }}</span>
                                            </div>
                                            <small class="text-muted">
                                                {{ $saleItem->sale->sale_date->format('d M, Y') ?? '' }}
                                            </small>
                                        </a>
                                        @endforeach
                                    </div>
                                    @else
                                    <p class="text-muted">No recent sales</p>
                                    @endif
                                </div>
                                
                                <div class="col-md-6">
                                    <h6>Recent Purchases</h6>
                                    @if($recentPurchases && $recentPurchases->count() > 0)
                                    <div class="list-group">
                                        @foreach($recentPurchases as $purchaseItem)
                                        <a href="{{ route('purchases.show', $purchaseItem->purchase_id) }}" 
                                           class="list-group-item list-group-item-action">
                                            <div class="d-flex justify-content-between">
                                                <span>{{ $purchaseItem->purchase->purchase_code ?? 'N/A' }}</span>
                                                <span class="text-primary">+{{ $purchaseItem->quantity }}</span>
                                            </div>
                                            <small class="text-muted">
                                                {{ $purchaseItem->purchase->purchase_date->format('d M, Y') ?? '' }}
                                            </small>
                                        </a>
                                        @endforeach
                                    </div>
                                    @else
                                    <p class="text-muted">No recent purchases</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .product-image-placeholder {
        border: 2px dashed #dee2e6;
    }
    
    .detail-item {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }
    
    .detail-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
    
    .detail-item strong {
        color: #555;
        display: block;
        margin-bottom: 3px;
    }
    
    .pricing-item, .stock-item {
        transition: all 0.3s ease;
    }
    
    .pricing-item:hover, .stock-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .list-group-item {
        border-left: none;
        border-right: none;
    }
    
    .list-group-item:first-child {
        border-top: none;
    }
    
    .list-group-item:last-child {
        border-bottom: none;
    }
</style>
@endpush

@push('scripts')
<script>
    $(document).ready(function() {
        // Stock update form validation
        $('form[action*="update-stock"]').submit(function(e) {
            var adjustmentType = $('#adjustment_type').val();
            var quantity = parseInt($('#quantity').val());
            var currentStock = {{ $product->stock_quantity }};
            
            if (adjustmentType === 'subtract' && quantity > currentStock) {
                e.preventDefault();
                alert('Cannot remove more stock than available! Available: ' + currentStock);
                return false;
            }
            
            if (quantity <= 0) {
                e.preventDefault();
                alert('Quantity must be greater than 0');
                return false;
            }
            
            return true;
        });
        
        // Auto-calculate new stock on form change
        $('#adjustment_type, #quantity').change(function() {
            var adjustmentType = $('#adjustment_type').val();
            var quantity = parseInt($('#quantity').val()) || 0;
            var currentStock = {{ $product->stock_quantity }};
            var newStock = currentStock;
            
            if (adjustmentType === 'add') {
                newStock = currentStock + quantity;
            } else if (adjustmentType === 'subtract') {
                newStock = currentStock - quantity;
                if (newStock < 0) newStock = 0;
            }
            
            // Show preview
            if (quantity > 0) {
                $('#new-stock-preview').remove();
                $('form[action*="update-stock"]').append(`
                    <div id="new-stock-preview" class="alert alert-info mt-2">
                        New stock will be: <strong>${newStock}</strong> units
                    </div>
                `);
            }
        });
    });
</script>
@endpush