@extends('layouts.bootstrap')

@section('title', 'Verify Similar Products')

@section('header')
    <h1 class="h3 mb-0">
        <i class="bi bi-exclamation-triangle-fill text-warning me-2"></i>Verify Similar Products
    </h1>
    <div class="d-flex gap-2">
        <a href="{{ route('products.import.form') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back to Import
        </a>
        <a href="{{ route('products.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-list me-1"></i>View Products
        </a>
    </div>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Import Progress Summary -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-warning">
                <div class="card-header bg-warning bg-opacity-10">
                    <h5 class="mb-0">
                        <i class="bi bi-info-circle me-2"></i>Import Progress for Category: {{ $importData['category_name'] }}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-3">
                            <div class="border-end">
                                <h4 class="text-success mb-1">{{ $importData['imported'] }}</h4>
                                <small class="text-muted">Auto Imported</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="border-end">
                                <h4 class="text-danger mb-1">{{ $importData['exact_duplicates'] }}</h4>
                                <small class="text-muted">Exact Duplicates</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="border-end">
                                <h4 class="text-warning mb-1">{{ count($importData['similar_items']) }}</h4>
                                <small class="text-muted">Need Verification</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <h4 class="text-info mb-1">{{ count($importData['errors']) }}</h4>
                            <small class="text-muted">Errors</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Verification Instructions -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-info">
                <h6><i class="bi bi-lightbulb me-2"></i>Manual Verification Required</h6>
                <p class="mb-2">The following products have names that are more than 90% similar to existing products. Please review each item and decide:</p>
                <ul class="mb-0">
                    <li><strong>Skip:</strong> Don't import this product</li>
                    <li><strong>Import as New:</strong> Import as a separate product</li>
                    <li><strong>Update Existing:</strong> Update the existing product with new information</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Bulk Actions -->
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-body py-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <strong>Bulk Actions:</strong>
                            <button type="button" class="btn btn-sm btn-outline-secondary ms-2" onclick="setAllDecisions('skip')">
                                Skip All
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-primary ms-1" onclick="setAllDecisions('import')">
                                Import All as New
                            </button>
                        </div>
                        <div>
                            <button type="button" class="btn btn-success" onclick="processVerification()">
                                <i class="bi bi-check-circle me-1"></i>Process Decisions
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Similar Products List -->
    <div class="row">
        <div class="col-12">
            @foreach($importData['similar_items'] as $index => $item)
                <div class="card mb-3 verification-item" data-index="{{ $index }}">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                <i class="bi bi-exclamation-triangle text-warning me-2"></i>
                                Row {{ $item['row'] }}: Similar Product Found
                            </h6>
                            <span class="badge bg-warning">{{ number_format($item['similar_products'][0]['similarity'], 1) }}% Similar</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- New Product -->
                            <div class="col-md-6">
                                <h6 class="text-primary">
                                    <i class="bi bi-plus-circle me-1"></i>New Product (from CSV)
                                </h6>
                                <div class="bg-light p-3 rounded">
                                    <div class="mb-2">
                                        <strong>Name:</strong> {{ $item['new_product']['name'] }}
                                    </div>
                                    @if($item['new_product']['country_of_origin'])
                                        <div class="mb-2">
                                            <strong>Country:</strong> {{ $item['new_product']['country_of_origin'] }}
                                        </div>
                                    @endif
                                    @if($item['new_product']['subcategory_name'])
                                        <div class="mb-2">
                                            <strong>Subcategory:</strong> {{ $item['new_product']['subcategory_name'] }}
                                        </div>
                                    @endif
                                    @if($item['new_product']['price'])
                                        <div class="mb-2">
                                            <strong>Price:</strong> ${{ number_format($item['new_product']['price'], 2) }}
                                        </div>
                                    @endif
                                    @if($item['new_product']['measurement_unit'])
                                        <div class="mb-2">
                                            <strong>Unit:</strong> {{ $item['new_product']['measurement_unit'] }}
                                        </div>
                                    @endif
                                    @if($item['new_product']['description'])
                                        <div class="mb-0">
                                            <strong>Description:</strong> {{ Str::limit($item['new_product']['description'], 100) }}
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <!-- Similar Existing Products -->
                            <div class="col-md-6">
                                <h6 class="text-danger">
                                    <i class="bi bi-database me-1"></i>Similar Existing Products
                                </h6>
                                @foreach($item['similar_products'] as $similar)
                                    @php
                                        $existingProduct = \App\Models\Product::with(['category', 'subcategory'])->find($similar['id']);
                                    @endphp
                                    <div class="bg-light p-3 rounded mb-2">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <strong>{{ $similar['name'] }}</strong>
                                            <span class="badge bg-secondary">{{ number_format($similar['similarity'], 1) }}%</span>
                                        </div>
                                        @if($existingProduct)
                                            @if($existingProduct->country_of_origin)
                                                <div class="small mb-1">
                                                    <strong>Country:</strong> {{ $existingProduct->country_of_origin }}
                                                </div>
                                            @endif
                                            @if($existingProduct->subcategory)
                                                <div class="small mb-1">
                                                    <strong>Subcategory:</strong> {{ $existingProduct->subcategory->name }}
                                                </div>
                                            @endif
                                            @if($existingProduct->price)
                                                <div class="small mb-1">
                                                    <strong>Price:</strong> ${{ number_format($existingProduct->price, 2) }}
                                                </div>
                                            @endif
                                            @if($existingProduct->measurement_unit)
                                                <div class="small mb-1">
                                                    <strong>Unit:</strong> {{ $existingProduct->measurement_unit }}
                                                </div>
                                            @endif
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Decision Options -->
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="border-top pt-3">
                                    <h6>Decision:</h6>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="decision_{{ $index }}" 
                                                       id="skip_{{ $index }}" value="skip" checked>
                                                <label class="form-check-label" for="skip_{{ $index }}">
                                                    <i class="bi bi-x-circle text-danger me-1"></i>Skip this item
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="decision_{{ $index }}" 
                                                       id="import_{{ $index }}" value="import">
                                                <label class="form-check-label" for="import_{{ $index }}">
                                                    <i class="bi bi-plus-circle text-success me-1"></i>Import as new product
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="decision_{{ $index }}" 
                                                       id="update_{{ $index }}" value="update">
                                                <label class="form-check-label" for="update_{{ $index }}">
                                                    <i class="bi bi-arrow-repeat text-warning me-1"></i>Update existing product
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Update Target Selection -->
                                    <div class="mt-2 update-target-selection" id="update_target_{{ $index }}" style="display: none;">
                                        <label class="form-label">Select product to update:</label>
                                        <select class="form-select" name="update_target_{{ $index }}">
                                            @foreach($item['similar_products'] as $similar)
                                                <option value="{{ $similar['id'] }}">
                                                    {{ $similar['name'] }} ({{ number_format($similar['similarity'], 1) }}% similar)
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Final Actions -->
    <div class="row mt-4">
        <div class="col-12 text-center">
            <button type="button" class="btn btn-success btn-lg" onclick="processVerification()">
                <i class="bi bi-check-circle me-2"></i>Complete Import Process
            </button>
        </div>
    </div>
</div>

<!-- Processing Modal -->
<div class="modal fade" id="processingModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center py-4">
                <div class="spinner-border text-primary mb-3" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <h5>Processing your decisions...</h5>
                <p class="text-muted mb-0">Please wait while we complete the import process.</p>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Handle update option visibility
document.addEventListener('DOMContentLoaded', function() {
    // Add event listeners to all decision radio buttons
    document.querySelectorAll('input[type="radio"][name^="decision_"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            const index = this.name.split('_')[1];
            const updateTarget = document.getElementById('update_target_' + index);

            if (this.value === 'update') {
                updateTarget.style.display = 'block';
            } else {
                updateTarget.style.display = 'none';
            }
        });
    });
});

// Bulk action functions
function setAllDecisions(decision) {
    document.querySelectorAll('input[type="radio"][value="' + decision + '"]').forEach(function(radio) {
        radio.checked = true;

        // Trigger change event to handle update target visibility
        const event = new Event('change');
        radio.dispatchEvent(event);
    });

    // Show success message
    const actionText = decision === 'skip' ? 'skip all items' : 'import all as new products';
    showToast('Bulk action applied', `Set all items to ${actionText}`, 'success');
}

// Process verification decisions
function processVerification() {
    const decisions = {};
    const updateTargets = {};

    // Collect all decisions
    document.querySelectorAll('input[type="radio"]:checked[name^="decision_"]').forEach(function(radio) {
        const index = radio.name.split('_')[1];
        decisions[index] = radio.value;

        // If update is selected, get the target
        if (radio.value === 'update') {
            const targetSelect = document.querySelector(`select[name="update_target_${index}"]`);
            if (targetSelect) {
                updateTargets[index] = targetSelect.value;
            }
        }
    });

    // Show processing modal
    const processingModal = new bootstrap.Modal(document.getElementById('processingModal'));
    processingModal.show();

    // Send AJAX request
    fetch('{{ route("products.import.process") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            decisions: decisions,
            update_target: updateTargets
        })
    })
    .then(response => response.json())
    .then(data => {
        processingModal.hide();

        if (data.success) {
            // Show success message and redirect
            showImportSummary(data.summary, data.message);

            setTimeout(() => {
                window.location.href = '{{ route("products.index") }}';
            }, 3000);
        } else {
            showToast('Error', data.error || 'An error occurred during processing', 'error');
        }
    })
    .catch(error => {
        processingModal.hide();
        console.error('Error:', error);
        showToast('Error', 'An error occurred during processing', 'error');
    });
}

// Show import summary
function showImportSummary(summary, message) {
    const summaryHtml = `
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <h5><i class="bi bi-check-circle me-2"></i>Import Completed Successfully!</h5>
            <p>${message}</p>
            <hr>
            <div class="row text-center">
                <div class="col-md-2">
                    <strong>${summary.total_imported}</strong><br>
                    <small>Total Imported</small>
                </div>
                <div class="col-md-2">
                    <strong>${summary.auto_imported}</strong><br>
                    <small>Auto Imported</small>
                </div>
                <div class="col-md-2">
                    <strong>${summary.verification_imported}</strong><br>
                    <small>Manual Import</small>
                </div>
                <div class="col-md-2">
                    <strong>${summary.verification_updated}</strong><br>
                    <small>Updated</small>
                </div>
                <div class="col-md-2">
                    <strong>${summary.verification_skipped}</strong><br>
                    <small>Skipped</small>
                </div>
                <div class="col-md-2">
                    <strong>${summary.exact_duplicates}</strong><br>
                    <small>Duplicates</small>
                </div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;

    // Insert at the top of the container
    const container = document.querySelector('.container-fluid');
    container.insertAdjacentHTML('afterbegin', summaryHtml);
}

// Toast notification function
function showToast(title, message, type = 'info') {
    const toastHtml = `
        <div class="toast align-items-center text-white bg-${type === 'error' ? 'danger' : type === 'success' ? 'success' : 'primary'} border-0" role="alert">
            <div class="d-flex">
                <div class="toast-body">
                    <strong>${title}</strong><br>${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    `;

    // Create toast container if it doesn't exist
    let toastContainer = document.querySelector('.toast-container');
    if (!toastContainer) {
        toastContainer = document.createElement('div');
        toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
        document.body.appendChild(toastContainer);
    }

    // Add toast
    toastContainer.insertAdjacentHTML('beforeend', toastHtml);

    // Show toast
    const toastElement = toastContainer.lastElementChild;
    const toast = new bootstrap.Toast(toastElement);
    toast.show();

    // Remove from DOM after hiding
    toastElement.addEventListener('hidden.bs.toast', function() {
        this.remove();
    });
}
</script>
@endpush
@endsection