@extends('layouts.bootstrap')

@section('title', 'Confirm Product Merge')

@section('header')
    <h1 class="h3 mb-0">
        <i class="bi bi-arrow-down-up me-2"></i>Confirm Product Merge
    </h1>
    <div>
        <a href="{{ route('products.merge.index') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back to Selection
        </a>
    </div>
@endsection

@section('content')
<div class="container-fluid">
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <h6><i class="bi bi-exclamation-triangle me-2"></i>Please fix the following errors:</h6>
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <!-- Products to Merge -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-list-check me-2"></i>Products to Merge ({{ $products->count() }})
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead class="table-light">
                                <tr>
                                    <th>Product Name</th>
                                    <th>Category</th>
                                    <th>Price</th>
                                    <th>Country</th>
                                    <th>Unit</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($products as $product)
                                    <tr>
                                        <td>
                                            <strong>{{ $product->name }}</strong>
                                            @if($product->description)
                                                <br><small class="text-muted">{{ Str::limit($product->description, 60) }}</small>
                                            @endif
                                        </td>
                                        <td>
                                            @if($product->category)
                                                <span class="badge bg-primary">{{ $product->category->name }}</span>
                                                @if($product->subcategory)
                                                    <br><small class="text-muted">{{ $product->subcategory->name }}</small>
                                                @endif
                                            @else
                                                <span class="text-muted">Not set</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($product->price)
                                                ৳{{ number_format($product->price, 2) }}
                                            @else
                                                <span class="text-muted">Not set</span>
                                            @endif
                                        </td>
                                        <td>{{ $product->country_of_origin ?? 'Not set' }}</td>
                                        <td>{{ $product->measurement_unit ?? 'Not set' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Merge Preview -->
                    <div class="mt-4 p-3 bg-light rounded">
                        <h6><i class="bi bi-info-circle me-2"></i>Merge Preview</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <strong>Average Price:</strong> 
                                @php
                                    $avgPrice = $products->whereNotNull('price')->avg('price');
                                @endphp
                                @if($avgPrice)
                                    ৳{{ number_format($avgPrice, 2) }}
                                @else
                                    Not available
                                @endif
                            </div>
                            <div class="col-md-6">
                                <strong>Primary Category:</strong> 
                                {{ $products->first()->category->name ?? 'Not set' }}
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-6">
                                <strong>Primary Country:</strong> 
                                {{ $products->first()->country_of_origin ?? 'Not set' }}
                            </div>
                            <div class="col-md-6">
                                <strong>Primary Unit:</strong> 
                                {{ $products->first()->measurement_unit ?? 'Not set' }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Merge Configuration -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-gear me-2"></i>Merge Configuration
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('products.merge.process') }}">
                        @csrf
                        
                        <!-- Hidden product IDs -->
                        @foreach($products as $product)
                            <input type="hidden" name="product_ids[]" value="{{ $product->id }}">
                        @endforeach

                        <div class="mb-3">
                            <label for="merged_name" class="form-label">
                                <i class="bi bi-tag me-1"></i>New Product Name <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control @error('merged_name') is-invalid @enderror" 
                                   id="merged_name" name="merged_name" 
                                   value="{{ old('merged_name') }}" 
                                   placeholder="Enter name for merged product" required>
                            @error('merged_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">This will be the name of the new consolidated product.</div>
                        </div>

                        <div class="mb-3">
                            <label for="merge_reason" class="form-label">
                                <i class="bi bi-chat-text me-1"></i>Merge Reason (Optional)
                            </label>
                            <textarea class="form-control @error('merge_reason') is-invalid @enderror" 
                                      id="merge_reason" name="merge_reason" rows="3"
                                      placeholder="Explain why these products are being merged...">{{ old('merge_reason') }}</textarea>
                            @error('merge_reason')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Optional explanation for the merge operation.</div>
                        </div>

                        <!-- Warning Box -->
                        <div class="alert alert-warning">
                            <h6><i class="bi bi-exclamation-triangle me-2"></i>Important Notice</h6>
                            <ul class="mb-0 small">
                                <li>Original products will be archived (soft deleted)</li>
                                <li>All tender associations will be transferred to the new product</li>
                                <li>Merge history will be preserved for audit purposes</li>
                                <li>This action cannot be easily undone</li>
                            </ul>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-check-circle me-1"></i>Confirm Merge
                            </button>
                            <a href="{{ route('products.merge.index') }}" class="btn btn-outline-secondary">
                                <i class="bi bi-x-circle me-1"></i>Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-suggest merged name based on selected products
    const products = @json($products->pluck('name'));
    const mergedNameInput = document.getElementById('merged_name');
    
    if (!mergedNameInput.value && products.length > 0) {
        // Create a suggested name from the first few product names
        let suggestion = '';
        if (products.length === 2) {
            suggestion = products.join(' & ');
        } else {
            suggestion = products.slice(0, 2).join(' & ') + ' + ' + (products.length - 2) + ' more';
        }
        
        // Limit suggestion length
        if (suggestion.length > 50) {
            suggestion = suggestion.substring(0, 47) + '...';
        }
        
        mergedNameInput.placeholder = `Suggested: ${suggestion}`;
    }
});
</script>
@endpush
@endsection