@extends('layouts.admin')

@section('title', 'Products Missing Purchase Price')

@section('content')
<div class="admin-page-header">
    <h1>Products Missing Purchase Price</h1>
    <div class="admin-page-actions">
        <a href="{{ route('admin.products.purchase-prices.import') }}" class="admin-btn-primary" style="background: #f59e0b;">
            <i class="bi bi-upload"></i> Bulk Import
        </a>
        <a href="{{ route('admin.reports.profit') }}" class="admin-btn-primary">
            <i class="bi bi-arrow-left"></i> Back to Profit Report
        </a>
    </div>
</div>

<!-- Summary Card -->
<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-warning">
                <i class="bi bi-exclamation-triangle"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value">{{ $missingCount }}</div>
                <div class="kpi-card-label">Products Missing Purchase Price</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-success">
                <i class="bi bi-check-circle"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value">{{ $totalProducts - $missingCount }}</div>
                <div class="kpi-card-label">Products with Purchase Price</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-info">
                <i class="bi bi-percent"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value">{{ number_format($coveragePercent, 1) }}%</div>
                <div class="kpi-card-label">Purchase Price Coverage</div>
            </div>
        </div>
    </div>
</div>

@if($coveragePercent < 100)
<div class="alert alert-warning mb-4">
    <i class="bi bi-exclamation-triangle"></i>
    <strong>Action Required:</strong> {{ $missingCount }} products are missing purchase prices, which affects profit calculations. 
    Add purchase prices to get accurate profit reports.
</div>
@endif

<!-- Products Missing Purchase Price -->
<div class="admin-card">
    <div class="card-header">
        <h5><i class="bi bi-list-ul"></i> Products Missing Purchase Price</h5>
        <div class="text-muted">
            {{ $products->total() }} products found
        </div>
    </div>
    <div class="card-body">
        @if($products->count() > 0)
            <div class="table-responsive">
                <table class="admin-table table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>Product Name</th>
                            <th>Category</th>
                            <th>Barcode</th>
                            <th class="text-end">Current Price</th>
                            <th class="text-end">MRP</th>
                            <th class="text-center">Stock</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($products as $product)
                        <tr>
                            <td>
                                <strong>{{ $product->name }}</strong>
                                @if(!$product->is_active)
                                    <span class="badge bg-secondary ms-2">Inactive</span>
                                @endif
                            </td>
                            <td>
                                @if($product->category)
                                    <span class="badge bg-light text-dark">{{ $product->category->name }}</span>
                                @else
                                    <span class="text-muted">No category</span>
                                @endif
                            </td>
                            <td>
                                @if($product->barcode)
                                    <code class="bg-light px-2 py-1 rounded">{{ $product->barcode }}</code>
                                @else
                                    <span class="text-muted">{{ $product->slug }}</span>
                                @endif
                            </td>
                            <td class="text-end">
                                <strong>₹{{ number_format($product->price, 2) }}</strong>
                            </td>
                            <td class="text-end">
                                @if($product->mrp)
                                    ₹{{ number_format($product->mrp, 2) }}
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <span class="badge {{ $product->current_stock > 0 ? 'bg-success' : 'bg-danger' }}">
                                    {{ $product->current_stock }}
                                </span>
                            </td>
                            <td class="text-center">
                                @if($product->is_active)
                                    <span class="badge bg-success">Active</span>
                                @else
                                    <span class="badge bg-secondary">Inactive</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <div class="btn-group btn-group-sm">
                                    <a href="{{ route('admin.products.edit', $product->id) }}" 
                                       class="btn btn-outline-primary btn-sm" 
                                       title="Edit Product">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <button type="button" 
                                            class="btn btn-outline-success btn-sm" 
                                            onclick="quickAddPurchasePrice({{ $product->id }}, '{{ addslashes($product->name) }}')"
                                            title="Quick Add Purchase Price">
                                        <i class="bi bi-plus"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="d-flex justify-content-center mt-4">
                {{ $products->links('vendor.pagination.collection') }}
            </div>
        @else
            <div class="text-center py-5">
                <i class="bi bi-check-circle text-success" style="font-size: 4rem;"></i>
                <h4 class="text-success mt-3">All Products Have Purchase Prices!</h4>
                <p class="text-muted">Great! All your active products have purchase prices set.</p>
                <div class="mt-4">
                    <a href="{{ route('admin.reports.profit') }}" class="btn btn-success">
                        <i class="bi bi-graph-up"></i> View Profit Reports
                    </a>
                </div>
            </div>
        @endif
    </div>
</div>

<!-- Quick Add Purchase Price Modal -->
<div class="modal fade mt-5" id="quickAddModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Purchase Price</h5>
                <button type="button" class="btn p-0 text-white" data-bs-dismiss="modal"><i class="bi-x-lg"></i></button>
            </div>
            <form id="quickAddForm">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Product</label>
                        <input type="text" class="form-control" id="productName" readonly>
                        <input type="hidden" id="productId">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Purchase Price (₹) *</label>
                        <input type="number" step="0.01" class="form-control" id="purchasePrice" required placeholder="Enter cost price">
                        <div class="form-text">Enter the cost price for this product</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Save Purchase Price</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('styles')
<style>
.admin-stat-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.stat-content h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.stat-content p {
    margin: 0;
    color: #6c757d;
    font-size: 0.9rem;
}

.table th {
    border-top: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.table-hover tbody tr:hover {
    background-color: rgba(0,0,0,0.02);
}

.btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.admin-page-actions {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .admin-page-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .admin-page-actions .btn {
        width: 100%;
    }
}
</style>
@endsection

@section('scripts')
<script>
function quickAddPurchasePrice(productId, productName) {
    document.getElementById('productId').value = productId;
    document.getElementById('productName').value = productName;
    document.getElementById('purchasePrice').value = '';
    
    const modal = new bootstrap.Modal(document.getElementById('quickAddModal'));
    modal.show();
}

document.getElementById('quickAddForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const productId = document.getElementById('productId').value;
    const purchasePrice = document.getElementById('purchasePrice').value;
    
    if (!purchasePrice || purchasePrice <= 0) {
        alert('Please enter a valid purchase price');
        return;
    }
    
    // Send AJAX request to update purchase price
    fetch(`/admin/products/${productId}/purchase-price`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            purchase_price: purchasePrice
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Close modal and reload page
            bootstrap.Modal.getInstance(document.getElementById('quickAddModal')).hide();
            location.reload();
        } else {
            alert('Error updating purchase price: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error updating purchase price');
    });
});
</script>
@endsection