@extends('layouts.app')

@section('title', 'Products')
@section('header', 'Product Management')

@section('content')
<style>
    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        transition: transform 0.3s;
    }
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
    .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 15px;
    }
    .stat-value {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .stat-label {
        color: #6c757d;
        font-size: 14px;
    }
    .barcode-cell {
        font-family: monospace;
        font-size: 12px;
        letter-spacing: 0.5px;
    }
    .copy-barcode-btn {
        cursor: pointer;
        transition: all 0.2s;
    }
    .copy-barcode-btn:hover {
        color: #4e73df;
        transform: scale(1.1);
    }
</style>

<div class="row mb-4">
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                <i class="fas fa-box"></i>
            </div>
            <div class="stat-value">{{ $totalProducts ?? 0 }}</div>
            <div class="stat-label">Total Products</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white;">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="stat-value">{{ $lowStockProducts ?? 0 }}</div>
            <div class="stat-label">Low Stock Products</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white;">
                <i class="fas fa-dollar-sign"></i>
            </div>
            <div class="stat-value">${{ number_format($inventoryValue ?? 0, 2) }}</div>
            <div class="stat-label">Inventory Value</div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            <i class="fas fa-list me-2"></i>All Products
        </h5>
        <a href="{{ route('products.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Add Product
        </a>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover" id="productsTable">
                <thead class="table-dark">
                    <tr>
                        <th width="50">ID</th>
                        <th width="60">Image</th>
                        <th>Name</th>
                        <th>SKU</th>
                        <th>Barcode</th>
                        <th>Category</th>
                        <th width="100">Price</th>
                        <th width="80">Stock</th>
                        <th width="80">Status</th>
                        <th width="150">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $product)
                    <tr>
                        <td>{{ $product->id }}</a>
                        <td class="text-center">
                            @if($product->image && Storage::disk('public')->exists($product->image))
                                <img src="{{ Storage::url($product->image) }}" alt="{{ $product->name }}" width="40" height="40" style="object-fit: cover; border-radius: 5px;">
                            @else
                                <img src="{{ asset('images/no-image.png') }}" alt="No image" width="40" height="40" style="object-fit: cover; border-radius: 5px;">
                            @endif
                         </a>
                        <td><strong>{{ $product->name }}</strong></a>
                        <td>{{ $product->sku }}</a>
                        <td class="barcode-cell">
                            @if($product->barcode)
                                <div class="d-flex align-items-center gap-2">
                                    <code class="bg-light p-1 rounded">{{ $product->barcode }}</code>
                                    <button class="btn btn-sm btn-link copy-barcode-btn p-0" 
                                            data-barcode="{{ $product->barcode }}" 
                                            title="Copy Barcode">
                                        <i class="fas fa-copy text-secondary"></i>
                                    </button>
                                    <a href="{{ route('products.print-barcode', $product) }}" 
                                       class="btn btn-sm btn-link p-0" 
                                       title="Print Barcode" 
                                       target="_blank">
                                        <i class="fas fa-print text-secondary"></i>
                                    </a>
                                </div>
                            @else
                                <span class="text-muted">N/A</span>
                            @endif
                         </a>
                        <td>{{ $product->category->name ?? 'N/A' }}</a>
                        <td class="text-end">${{ number_format($product->selling_price, 2) }}</a>
                        <td class="text-center">
                            @if($product->stock <= 0)
                                <span class="badge bg-dark">Out of Stock</span>
                            @elseif($product->stock <= $product->min_stock)
                                <span class="badge bg-danger">{{ $product->stock }}</span>
                            @else
                                <span class="badge bg-success">{{ $product->stock }}</span>
                            @endif
                         </a>
                        <td class="text-center">
                            @if($product->is_active)
                                <span class="badge bg-success">Active</span>
                            @else
                                <span class="badge bg-danger">Inactive</span>
                            @endif
                         </a>
                        <td class="text-center">
                            <div class="btn-group" role="group">
                                <a href="{{ route('products.show', $product) }}" class="btn btn-sm btn-info" title="View Product">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('products.edit', $product) }}" class="btn btn-sm btn-warning" title="Edit Product">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button type="button" class="btn btn-sm btn-danger delete-product" 
                                        data-id="{{ $product->id }}" data-name="{{ $product->name }}" title="Delete Product">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                            <form id="delete-form-{{ $product->id }}" action="{{ route('products.destroy', $product) }}" method="POST" style="display: none;">
                                @csrf
                                @method('DELETE')
                            </form>
                         </a>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="text-center py-4">
                            <i class="fas fa-box-open fa-3x text-muted mb-2 d-block"></i>
                            No products found
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-3 d-flex justify-content-end">
            {{ $products->links() }}
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize DataTable
    var table = $('#productsTable').DataTable({
        pageLength: 15,
        responsive: true,
        order: [[0, 'desc']],
        searching: true,
        paging: false, // Disable DataTable pagination since we use Laravel pagination
        info: false,
        language: {
            search: "Search:",
            lengthMenu: "Show _MENU_ entries",
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
            paginate: {
                first: "First",
                last: "Last",
                next: "Next",
                previous: "Previous"
            }
        }
    });
    
    // Copy barcode functionality
    $('.copy-barcode-btn').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        const barcode = $(this).data('barcode');
        
        // Copy to clipboard
        navigator.clipboard.writeText(barcode).then(function() {
            Swal.fire({
                icon: 'success',
                title: 'Copied!',
                text: 'Barcode: ' + barcode,
                timer: 1500,
                showConfirmButton: false,
                toast: true,
                position: 'top-end'
            });
        }).catch(function() {
            // Fallback for older browsers
            const textarea = document.createElement('textarea');
            textarea.value = barcode;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            
            Swal.fire({
                icon: 'success',
                title: 'Copied!',
                text: 'Barcode: ' + barcode,
                timer: 1500,
                showConfirmButton: false
            });
        });
    });
    
    // Delete product
    $('.delete-product').click(function() {
        const id = $(this).data('id');
        const name = $(this).data('name');
        
        Swal.fire({
            title: 'Delete Product?',
            html: `Are you sure you want to delete <strong>${name}</strong>?<br><span class="text-danger">This action cannot be undone!</span>`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        });
    });
});
</script>
@endpush
@endsection