@extends('layouts.bootstrap')

@section('title', 'Verify Similar Products - ' . $tender->name)

@section('header')
    <h1 class="h3 mb-0">
        <i class="bi bi-search me-2"></i>Verify Similar Products
    </h1>
    <div>
        <a href="{{ route('tenders.show', $tender) }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back to Tender
        </a>
    </div>
@endsection

@section('content')
<div class="container-fluid">
    <div class="card shadow">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4 class="mb-1">
                        <i class="bi bi-search me-2"></i>Verify Similar Products
                    </h4>
                    <p class="text-muted mb-0">
                        Review products that are similar to existing ones for tender: <strong>{{ $tender->name }}</strong>
                    </p>
                </div>
                <a href="{{ route('tenders.import.form', $tender) }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Back to Import
                </a>
            </div>
        </div>

        <div class="card-body">
            <!-- Import Progress Summary -->
            <div class="alert alert-info">
                <h6><i class="bi bi-info-circle me-2"></i>Import Progress Summary</h6>
                <div class="row text-center">
                    @php
                        $autoLinkedCount = count(array_filter($importData['auto_imported'] ?? [], function($item) {
                            return isset($item['action']) && $item['action'] === 'auto_linked_100_match';
                        }));
                        $regularImported = $importData['imported'] - $autoLinkedCount;
                    @endphp
                    <div class="col-md-2">
                        <strong class="text-success">{{ $regularImported }}</strong><br>
                        <small>New Products</small>
                    </div>
                    @if($autoLinkedCount > 0)
                        <div class="col-md-2">
                            <strong class="text-primary">{{ $autoLinkedCount }}</strong><br>
                            <small>Auto-Linked (100%)</small>
                        </div>
                    @endif
                    <div class="col-md-2">
                        <strong class="text-warning">{{ $importData['exact_duplicates'] }}</strong><br>
                        <small>Duplicates Skipped</small>
                    </div>
                    <div class="col-md-2">
                        <strong class="text-danger">{{ count($importData['similar_items']) }}</strong><br>
                        <small>Need Verification</small>
                    </div>
                    <div class="col-md-2">
                        <strong class="text-info">{{ $importData['total_rows'] }}</strong><br>
                        <small>Total Rows</small>
                    </div>
                    @if(!empty($importData['errors']))
                        <div class="col-md-2">
                            <strong class="text-danger">{{ count($importData['errors']) }}</strong><br>
                            <small>Errors</small>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Verification Instructions -->
            <div class="alert alert-warning">
                <h6><i class="bi bi-exclamation-triangle me-2"></i>Manual Verification Required</h6>
                <p class="mb-2">
                    The following products are similar to existing products in the database.
                    Please review each item and decide whether to <strong>Skip</strong>, <strong>Import as New</strong>, or <strong>Link to Existing</strong>.
                </p>
                <div class="alert alert-success alert-sm mb-0">
                    <i class="bi bi-lightbulb me-1"></i>
                    <strong>Auto-linking:</strong> Products with 100% matches are automatically linked during import.
                    Only products with partial matches (90-99%) require manual verification.
                </div>
            </div>

            <form id="verificationForm">
                @csrf
                
                <!-- Bulk Actions -->
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h5>Products Requiring Verification ({{ count($importData['similar_items']) }})</h5>
                    </div>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="bulkAction('skip')">
                            <i class="bi bi-x-circle me-1"></i>Skip All
                        </button>
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="bulkAction('import')">
                            <i class="bi bi-plus-circle me-1"></i>Import All as New
                        </button>
                    </div>
                </div>

                <!-- Similar Products List -->
                @foreach($importData['similar_items'] as $index => $item)
                    <div class="card mb-4 border-warning">
                        <div class="card-header bg-warning bg-opacity-10">
                            <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">{{ count($item['similar_products']) }} similar matches</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <!-- New Product Information -->
                                <div class="col-md-6">
                                    <h6 class="text-primary">
                                        <i class="bi bi-plus-circle me-2"></i>New Product (from CSV)
                                    </h6>
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h6 class="card-title">{{ $item['new_product']['name'] }}</h6>
                                            @if($item['new_product']['description'])
                                                <p class="card-text small text-muted">{{ $item['new_product']['description'] }}</p>
                                            @endif
                                            <div class="row">
                                                @if($item['new_product']['country_of_origin'])
                                                    <div class="col-6">
                                                        <small><strong>Country:</strong> {{ $item['new_product']['country_of_origin'] }}</small>
                                                    </div>
                                                @endif
                                                @if($item['new_product']['price_bdt'])
                                                    <div class="col-6">
                                                        <small><strong>Price:</strong> ৳{{ number_format($item['new_product']['price_bdt'], 2) }}</small>
                                                    </div>
                                                @endif
                                                @if($item['new_product']['measurement_unit'])
                                                    <div class="col-6">
                                                        <small><strong>Unit:</strong> {{ $item['new_product']['measurement_unit'] }}</small>
                                                    </div>
                                                @endif
                                                @if($item['new_product']['quantity_required'])
                                                    <div class="col-6">
                                                        <small><strong>Quantity:</strong> {{ $item['new_product']['quantity_required'] }}</small>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Similar Existing Products -->
                                <div class="col-md-6">
                                    <h6 class="text-info">
                                        <i class="bi bi-database me-2"></i>Similar Existing Products
                                    </h6>
                                    @foreach($item['similar_products'] as $similar)
                                        @php
                                            $isExactMatch = $similar['similarity'] == 100;
                                            $badgeClass = $isExactMatch ? 'bg-success' : 'bg-info';
                                            $cardClass = $isExactMatch ? 'border-success' : 'border-info';
                                        @endphp
                                        <div class="card mb-2 {{ $cardClass }}">
                                            <div class="card-body py-2">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <h6 class="mb-1">
                                                            {{ $similar['name'] }}
                                                            @if($isExactMatch)
                                                                <i class="bi bi-check-circle text-success ms-1" title="Exact Match"></i>
                                                            @endif
                                                        </h6>
                                                        <small class="text-muted">Product ID: {{ $similar['id'] }}</small>
                                                    </div>
                                                    <span class="badge {{ $badgeClass }}">
                                                        {{ $similar['similarity'] }}%
                                                        @if($isExactMatch) EXACT @else similar @endif
                                                    </span>
                                                </div>
                                                @if($isExactMatch)
                                                    <div class="mt-2">
                                                        <small class="text-success">
                                                            <i class="bi bi-info-circle me-1"></i>
                                                            This is an exact match. Consider linking to avoid duplicates.
                                                        </small>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <!-- Decision Options -->
                            <hr>
                            <div class="row">
                                <div class="col-12">
                                    <h6>What would you like to do with this product?</h6>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" 
                                                       name="decisions[{{ $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>
                                                    <strong>Skip</strong><br>
                                                    <small class="text-muted">Don't import this product</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" 
                                                       name="decisions[{{ $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>
                                                    <strong>Import as New</strong><br>
                                                    <small class="text-muted">Add as separate product</small>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" 
                                                       name="decisions[{{ $index }}]" 
                                                       id="link_{{ $index }}" 
                                                       value="link">
                                                <label class="form-check-label" for="link_{{ $index }}">
                                                    <i class="bi bi-link text-primary me-1"></i>
                                                    <strong>Link to Existing</strong><br>
                                                    <small class="text-muted">Use existing product data</small>
                                                </label>
                                            </div>
                                            <div class="mt-2" id="link_options_{{ $index }}" style="display: none;">
                                                <select class="form-select form-select-sm" name="link_target[{{ $index }}]">
                                                    <option value="">Select existing product...</option>
                                                    @foreach($item['similar_products'] as $similar)
                                                        <option value="{{ $similar['id'] }}">
                                                            {{ $similar['name'] }} ({{ $similar['similarity'] }}% similar)
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

                <!-- Action Buttons -->
                <div class="d-flex justify-content-between mt-4">
                    <a href="{{ route('tenders.import.form', $tender) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-1"></i>Back to Import
                    </a>
                    <button type="button" class="btn btn-primary" onclick="processDecisions()">
                        <i class="bi bi-check-circle me-1"></i>Process Decisions
                        <span class="spinner-border spinner-border-sm ms-2" role="status" style="display: none;" id="processSpinner"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle link option visibility
    document.querySelectorAll('input[type="radio"][value="link"]').forEach(radio => {
        radio.addEventListener('change', function() {
            const index = this.id.split('_')[1];
            const linkOptions = document.getElementById(`link_options_${index}`);
            if (this.checked) {
                linkOptions.style.display = 'block';
            }
        });
    });

    // Hide link options when other options are selected
    document.querySelectorAll('input[type="radio"]:not([value="link"])').forEach(radio => {
        radio.addEventListener('change', function() {
            const index = this.id.split('_')[1];
            const linkOptions = document.getElementById(`link_options_${index}`);
            if (this.checked) {
                linkOptions.style.display = 'none';
            }
        });
    });

    // Auto-suggest linking for 100% matches
    document.querySelectorAll('.badge.bg-success').forEach(badge => {
        if (badge.textContent.includes('100%')) {
            // Find the parent card and suggest linking
            const card = badge.closest('.card.mb-4');
            if (card) {
                const index = card.querySelector('input[type="radio"]').id.split('_')[1];
                const linkRadio = document.getElementById(`link_${index}`);
                const linkSelect = document.querySelector(`select[name="link_target[${index}]"]`);

                // Add a suggestion notice
                const suggestionDiv = document.createElement('div');
                suggestionDiv.className = 'alert alert-success alert-sm mt-2';
                suggestionDiv.innerHTML = `
                    <i class="bi bi-lightbulb me-1"></i>
                    <strong>Suggestion:</strong> This product has a 100% match.
                    <a href="#" onclick="selectLinkOption(${index}); return false;" class="alert-link">
                        Click here to auto-link
                    </a>
                `;

                const decisionRow = card.querySelector('.row:last-child');
                decisionRow.appendChild(suggestionDiv);
            }
        }
    });
});

// Function to auto-select link option and first 100% match
function selectLinkOption(index) {
    const linkRadio = document.getElementById(`link_${index}`);
    const linkSelect = document.querySelector(`select[name="link_target[${index}]"]`);

    if (linkRadio && linkSelect) {
        linkRadio.checked = true;
        linkRadio.dispatchEvent(new Event('change'));

        // Select the first option (which should be the 100% match)
        if (linkSelect.options.length > 1) {
            linkSelect.selectedIndex = 1; // Skip the "Select..." option
        }
    }
}

function bulkAction(action) {
    const radios = document.querySelectorAll(`input[type="radio"][value="${action}"]`);
    radios.forEach(radio => {
        radio.checked = true;
        radio.dispatchEvent(new Event('change'));
    });
}

function processDecisions() {
    const form = document.getElementById('verificationForm');
    const formData = new FormData(form);
    const spinner = document.getElementById('processSpinner');
    
    // Show loading state
    spinner.style.display = 'inline-block';
    
    // Validate link decisions
    const linkRadios = document.querySelectorAll('input[type="radio"][value="link"]:checked');
    for (let radio of linkRadios) {
        const index = radio.id.split('_')[1];
        const linkTarget = document.querySelector(`select[name="link_target[${index}]"]`);
        if (!linkTarget.value) {
            alert('Please select an existing product to link to, or choose a different option.');
            spinner.style.display = 'none';
            return;
        }
    }
    
    // Convert FormData to regular object
    const decisions = {};
    const linkTargets = {};
    
    for (let [key, value] of formData.entries()) {
        if (key.startsWith('decisions[')) {
            const index = key.match(/\[(\d+)\]/)[1];
            decisions[index] = value;
        } else if (key.startsWith('link_target[')) {
            const index = key.match(/\[(\d+)\]/)[1];
            linkTargets[index] = value;
        }
    }
    
    // Send AJAX request
    fetch('{{ route("tenders.import.process", $tender) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            decisions: decisions,
            link_target: linkTargets
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success message and redirect
            alert(data.message);
            window.location.href = '{{ route("tenders.show", $tender) }}';
        } else {
            alert('Error: ' + (data.message || 'Unknown error occurred'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while processing your decisions. Please try again.');
    })
    .finally(() => {
        spinner.style.display = 'none';
    });
}
</script>
@endpush
@endsection