@extends('admin.layouts.app')

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

@section('breadcrumb')
    <li class="breadcrumb-item active">{{ __('Products') }}</li>
@endsection

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ __('Products Management') }}</h1>
        <p class="text-muted mb-0">{{ __('Manage your product catalog with VAT and pricing') }}</p>
    </div>
    <div>
        <a href="{{ route('admin.products.create') }}" class="btn btn-primary">
            <i class="fas fa-plus me-2"></i>
            {{ __('Add New Product') }}
        </a>
    </div>
@endsection

@push('styles')
    <style>
        .stats-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            padding: 1.5rem;
            color: white;
            margin-bottom: 1rem;
        }

        .stats-card.warning {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .stats-card.success {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .product-image {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 8px;
        }

        .price-display {
            font-family: 'Monaco', 'Menlo', monospace;
            font-weight: 600;
        }

        .price-base {
            color: #6b7280;
            font-size: 0.85em;
        }

        .price-customer {
            color: #059669;
            font-size: 1.1em;
        }

        .vat-included {
            background: #ecfdf5;
            color: #059669;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.75em;
            font-weight: 500;
        }

        .status-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
    </style>
@endpush

@section('content')
    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6">
            <div class="stats-card">
                <div class="d-flex justify-content-between">
                    <div>
                        <h3 class="fw-bold mb-0">{{ number_format($stats['total']) }}</h3>
                        <p class="mb-0 opacity-75">{{ __('Total Products') }}</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-box fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="stats-card success">
                <div class="d-flex justify-content-between">
                    <div>
                        <h3 class="fw-bold mb-0">{{ number_format($stats['active']) }}</h3>
                        <p class="mb-0 opacity-75">{{ __('Active Products') }}</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-check-circle fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="stats-card warning">
                <div class="d-flex justify-content-between">
                    <div>
                        <h3 class="fw-bold mb-0">{{ number_format($stats['low_stock']) }}</h3>
                        <p class="mb-0 opacity-75">{{ __('Low Stock') }}</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-exclamation-triangle fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="stats-card"
                 style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); color: #8b4513;">
                <div class="d-flex justify-content-between">
                    <div>
                        <h3 class="fw-bold mb-0">{{ number_format($stats['featured']) }}</h3>
                        <p class="mb-0 opacity-75">{{ __('Featured Products') }}</p>
                    </div>
                    <div class="align-self-center">
                        <i class="fas fa-star fa-2x opacity-75"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="admin-card mb-4">
        <div class="card-body-custom">
            <form method="GET" action="{{ route('admin.products.index') }}" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">{{ __('Search') }}</label>
                    <input type="text" class="form-control" name="search"
                           value="{{ request('search') }}"
                           placeholder="{{ __('Search products...') }}">
                </div>

                <div class="col-md-2">
                    <label class="form-label">{{ __('Category') }}</label>
                    <select name="category" class="form-select">
                        <option value="">{{ __('All Categories') }}</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}"
                                {{ request('category') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label">{{ __('Status') }}</label>
                    <select name="status" class="form-select">
                        <option value="">{{ __('All Status') }}</option>
                        <option
                            value="active" {{ request('status') == 'active' ? 'selected' : '' }}>{{ __('Active') }}</option>
                        <option
                            value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>{{ __('Inactive') }}</option>
                        <option
                            value="featured" {{ request('status') == 'featured' ? 'selected' : '' }}>{{ __('Featured') }}</option>
                        <option
                            value="low_stock" {{ request('status') == 'low_stock' ? 'selected' : '' }}>{{ __('Low Stock') }}</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label">{{ __('Price Range') }}</label>
                    <div class="input-group">
                        <input type="number" class="form-control" name="min_price"
                               value="{{ request('min_price') }}" placeholder="Min">
                        <span class="input-group-text">-</span>
                        <input type="number" class="form-control" name="max_price"
                               value="{{ request('max_price') }}" placeholder="Max">
                    </div>
                </div>

                <div class="col-md-2">
                    <label class="form-label">{{ __('Sort By') }}</label>
                    <select name="sort" class="form-select">
                        <option
                            value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>{{ __('Newest') }}</option>
                        <option
                            value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>{{ __('Oldest') }}</option>
                        <option value="name" {{ request('sort') == 'name' ? 'selected' : '' }}>{{ __('Name') }}</option>
                        <option
                            value="price_low" {{ request('sort') == 'price_low' ? 'selected' : '' }}>{{ __('Price: Low to High') }}</option>
                        <option
                            value="price_high" {{ request('sort') == 'price_high' ? 'selected' : '' }}>{{ __('Price: High to Low') }}</option>
                    </select>
                </div>

                <div class="col-md-1">
                    <label class="form-label">&nbsp;</label>
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Products Table -->
    <div class="admin-card">
        <div class="card-header-custom">
            <h5 class="mb-0">{{ __('Products List') }}</h5>
            <div>
                <button class="btn btn-sm btn-outline-secondary me-2">
                    <i class="fas fa-download me-1"></i>{{ __('Export') }}
                </button>
                <button class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-upload me-1"></i>{{ __('Import') }}
                </button>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                <tr>
                    <th width="50">
                        <input type="checkbox" id="selectAll" class="form-check-input">
                    </th>
                    <th>{{ __('Product') }}</th>
                    <th>{{ __('SKU') }}</th>
                    <th>{{ __('Pricing & VAT') }}</th>
                    <th>{{ __('Stock') }}</th>
                    <th>{{ __('Status') }}</th>
                    <th>{{ __('Actions') }}</th>
                </tr>
                </thead>
                <tbody>
                @forelse($products as $product)
                    <tr>
                        <td>
                            <input type="checkbox" class="form-check-input product-checkbox"
                                   value="{{ $product->id }}">
                        </td>

                        <td>
                            <div class="d-flex align-items-center">
                                @if($product->main_image)
                                    <img src="{{ asset('storage/' . $product->main_image->image_path) }}"
                                         alt="{{ $product->name }}" class="product-image me-3">
                                @else
                                    <div
                                        class="product-image me-3 bg-light d-flex align-items-center justify-content-center">
                                        <i class="fas fa-image text-muted"></i>
                                    </div>
                                @endif

                                <div>
                                    <h6 class="mb-1">
                                        <a href="{{ route('admin.products.show', $product->id) }}"
                                           class="text-decoration-none">
                                            {{ $product->name }}
                                        </a>
                                    </h6>
                                    <small class="text-muted">{{ $product->brand }}</small>
                                    @if($product->is_featured)
                                        <span class="badge bg-warning ms-2">
                                                <i class="fas fa-star"></i> {{ __('Featured') }}
                                            </span>
                                    @endif
                                </div>
                            </div>
                        </td>

                        <td>
                            <code class="bg-light px-2 py-1 rounded">{{ $product->sku }}</code>
                            @if($product->cod_eligible)
                                <br><span class="badge bg-info mt-1">{{ __('COD') }}</span>
                            @endif
                        </td>

                        <td>
                            <div class="price-display">
                                @php
                                    $basePrice = $product->sale_price ?: $product->price;
                                    $vatAmount = $basePrice * ($product->tax_rate/100);
                                    $customerPrice = $basePrice + $vatAmount;
                                @endphp

                                <div class="price-base">
                                    {{ __('Base') }}: {{ number_format($basePrice, 2) }} {{ __('SAR') }}
                                </div>
                                <div class="price-customer">
                                    {{ __('Customer') }}: {{ number_format($customerPrice, 2) }} {{ __('SAR') }}
                                </div>
                                <span class="vat-included">{{ __('incl. 15% VAT') }}</span>

                                @if($product->sale_price)
                                    @php
                                        $discount = (($product->price - $product->sale_price) / $product->price) * 100;
                                    @endphp
                                    <div class="mt-1">
                                        <span class="badge bg-danger">-{{ number_format($discount, 0) }}%</span>
                                    </div>
                                @endif
                            </div>
                        </td>

                        <td>
                            @if($product->track_inventory)
                                @if($product->quantity <= 0)
                                    <span class="badge bg-danger">{{ __('Out of Stock') }}</span>
                                @elseif($product->quantity <= $product->min_quantity)
                                    <span class="badge bg-warning text-dark">
                                            {{ __('Low Stock') }} ({{ $product->quantity }})
                                        </span>
                                @else
                                    <span class="badge bg-success">
                                            {{ __('In Stock') }} ({{ $product->quantity }})
                                        </span>
                                @endif
                            @else
                                <span class="badge bg-info">{{ __('Not Tracked') }}</span>
                            @endif
                        </td>

                        <td>
                            <div class="d-flex flex-column gap-1">
                                @if($product->is_active)
                                    <span class="badge bg-success status-badge">{{ __('Active') }}</span>
                                @else
                                    <span class="badge bg-secondary status-badge">{{ __('Inactive') }}</span>
                                @endif

                                @if($product->status)
                                    <span class="badge bg-info status-badge">
                                            {{ ucfirst($product->status) }}
                                        </span>
                                @endif
                            </div>
                        </td>

                        <td>
                            <div class="btn-group" role="group">
                                <a href="{{ route('admin.products.show', $product->id) }}"
                                   class="btn btn-sm btn-outline-info" title="{{ __('View') }}">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('admin.products.edit', $product->id) }}"
                                   class="btn btn-sm btn-outline-primary" title="{{ __('Edit') }}">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <button type="button" class="btn btn-sm btn-outline-success toggle-status"
                                        data-id="{{ $product->id }}"
                                        title="{{ $product->is_active ? __('Deactivate') : __('Activate') }}">
                                    <i class="fas fa-{{ $product->is_active ? 'eye-slash' : 'eye' }}"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-danger delete-product"
                                        data-id="{{ $product->id }}" title="{{ __('Delete') }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center py-4">
                            <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">{{ __('No products found') }}</h5>
                            <p class="text-muted mb-3">{{ __('Start by adding your first product') }}</p>
                            <a href="{{ route('admin.products.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus me-2"></i>{{ __('Add Product') }}
                            </a>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        @if($products->hasPages())
            <div class="card-footer-custom">
                {{ $products->links() }}
            </div>
        @endif
    </div>

    <!-- Bulk Actions -->
    <div id="bulk-actions"
         class="position-fixed bottom-0 start-50 translate-middle-x bg-primary text-white p-3 rounded-top shadow"
         style="display: none; z-index: 1050;">
        <div class="d-flex align-items-center gap-3">
            <span id="selected-count">0</span> {{ __('selected') }}

            <div class="btn-group">
                <button class="btn btn-sm btn-light" onclick="bulkAction('activate')">
                    <i class="fas fa-eye me-1"></i>{{ __('Activate') }}
                </button>
                <button class="btn btn-sm btn-light" onclick="bulkAction('deactivate')">
                    <i class="fas fa-eye-slash me-1"></i>{{ __('Deactivate') }}
                </button>
                <button class="btn btn-sm btn-light" onclick="bulkAction('feature')">
                    <i class="fas fa-star me-1"></i>{{ __('Feature') }}
                </button>
                <button class="btn btn-sm btn-danger" onclick="bulkAction('delete')">
                    <i class="fas fa-trash me-1"></i>{{ __('Delete') }}
                </button>
            </div>

            <button class="btn btn-sm btn-outline-light" onclick="clearSelection()">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Checkbox handling
            const selectAll = document.getElementById('selectAll');
            const productCheckboxes = document.querySelectorAll('.product-checkbox');
            const bulkActions = document.getElementById('bulk-actions');
            const selectedCount = document.getElementById('selected-count');

            selectAll.addEventListener('change', function () {
                productCheckboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
                updateBulkActions();
            });

            productCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateBulkActions);
            });

            function updateBulkActions() {
                const checked = document.querySelectorAll('.product-checkbox:checked');
                selectedCount.textContent = checked.length;

                if (checked.length > 0) {
                    bulkActions.style.display = 'block';
                } else {
                    bulkActions.style.display = 'none';
                }
            }

            // Toggle status
            document.querySelectorAll('.toggle-status').forEach(button => {
                button.addEventListener('click', function () {
                    const productId = this.dataset.id;
                    fetch(`/admin/products/${productId}/toggle-status`, {
                        method: 'PATCH',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            'Accept': 'application/json'
                        }
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                location.reload();
                            }
                        });
                });
            });

            // Delete product
            document.querySelectorAll('.delete-product').forEach(button => {
                button.addEventListener('click', function () {
                    if (confirm('{{ __("Are you sure you want to delete this product?") }}')) {
                        const productId = this.dataset.id;
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = `/admin/products/${productId}`;
                        form.innerHTML = `
                            <input type="hidden" name="_method" value="DELETE">
                            <input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]').content}">
                        `;
                        document.body.appendChild(form);
                        form.submit();
                    }
                });
            });
        });

        function bulkAction(action) {
            const checked = Array.from(document.querySelectorAll('.product-checkbox:checked'))
                .map(cb => cb.value);

            if (checked.length === 0) return;

            if (confirm(`{{ __("Are you sure you want to") }} ${action} {{ __("selected products?") }}`)) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '{{ route("admin.products.bulk-action") }}';
                form.innerHTML = `
                    <input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]').content}">
                    <input type="hidden" name="action" value="${action}">
                    ${checked.map(id => `<input type="hidden" name="products[]" value="${id}">`).join('')}
                `;
                document.body.appendChild(form);
                form.submit();
            }
        }

        function clearSelection() {
            document.querySelectorAll('.product-checkbox').forEach(cb => cb.checked = false);
            document.getElementById('selectAll').checked = false;
            document.getElementById('bulk-actions').style.display = 'none';
        }
    </script>
@endpush