@extends('layouts.app')

@section('content')
    <!-- Attribute Groups Section -->
    <div class="section">
        <h2>📦 Attribute Groups</h2>
        <p>View attribute groups that organize attributes within attribute sets:</p>
        
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;">
            <!-- Magento 1 Attribute Groups -->
            <div>
                <h3 style="margin-bottom: 15px; color: #667eea;">Magento 1 Attribute Groups ({{ $m1AttributeGroups->count() }})</h3>
                <div style="background: white; border: 1px solid #ddd; border-radius: 6px; padding: 20px; max-height: 600px; overflow-y: auto;">
                    @if($m1AttributeGroups->count() > 0)
                        <table class="attributes-table">
                            <thead>
                                <tr>
                                    <th>Group ID</th>
                                    <th>Group Name</th>
                                    <th>Attribute Set</th>
                                    <th>Attributes</th>
                                    <th>Sort Order</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($m1AttributeGroups as $group)
                                    @php
                                        $groupKey = ($group->attribute_set_name ?? 'Default') . '|' . ($group->attribute_group_name ?? '');
                                        $isMissing = $m1AttributeGroupsMissingInM2->contains(function($missingGroup) use ($groupKey) {
                                            return ($missingGroup->attribute_set_name ?? 'Default') . '|' . ($missingGroup->attribute_group_name ?? '') === $groupKey;
                                        });
                                    @endphp
                                    <tr id="group-row-{{ $group->attribute_group_id }}-{{ $group->attribute_set_id }}" style="{{ $isMissing ? 'background: #fff3cd;' : '' }}">
                                        <td>{{ $group->attribute_group_id }}</td>
                                        <td>{{ $group->attribute_group_name ?? 'N/A' }}</td>
                                        <td>{{ $group->attribute_set_name ?? 'Default' }}</td>
                                        <td>{{ $group->attribute_count ?? 0 }}</td>
                                        <td>{{ $group->sort_order ?? 0 }}</td>
                                        <td>
                                            @if($isMissing)
                                                <button 
                                                    class="btn btn-primary" 
                                                    onclick="migrateAttributeGroup({{ $group->attribute_group_id }}, {{ $group->attribute_set_id }}, '{{ $group->attribute_group_name ?? 'N/A' }}')"
                                                    id="migrate-group-btn-{{ $group->attribute_group_id }}-{{ $group->attribute_set_id }}"
                                                    style="padding: 6px 12px; font-size: 0.85em;">
                                                    Migrate
                                                </button>
                                            @else
                                                <span style="color: #28a745;">✓ Exists</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @else
                        <div style="text-align: center; padding: 40px; color: #999;">
                            No attribute groups found.
                        </div>
                    @endif
                </div>
            </div>

            <!-- Magento 2 Attribute Groups -->
            <div>
                <h3 style="margin-bottom: 15px; color: #764ba2;">Magento 2 Attribute Groups ({{ $m2AttributeGroups->count() }})</h3>
                <div style="background: white; border: 1px solid #ddd; border-radius: 6px; padding: 20px; max-height: 600px; overflow-y: auto;">
                    @if($m2AttributeGroups->count() > 0)
                        <table class="attributes-table">
                            <thead>
                                <tr>
                                    <th>Group ID</th>
                                    <th>Group Name</th>
                                    <th>Attribute Set</th>
                                    <th>Attributes</th>
                                    <th>Sort Order</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($m2AttributeGroups as $group)
                                    <tr>
                                        <td>{{ $group->attribute_group_id }}</td>
                                        <td>{{ $group->attribute_group_name ?? 'N/A' }}</td>
                                        <td>{{ $group->attribute_set_name ?? 'Default' }}</td>
                                        <td>{{ $group->attribute_count ?? 0 }}</td>
                                        <td>{{ $group->sort_order ?? 0 }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @else
                        <div style="text-align: center; padding: 40px; color: #999;">
                            No attribute groups found.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Missing Attributes Section -->
    <div class="section" style="margin-top: 30px;">
        <h2>⚠️ Missing Attributes</h2>
        <p>These attributes exist in Magento 1 but are missing in Magento 2:</p>
        
        @if($m1AttributesMissingInM2->count() > 0)
            <div style="background: white; border: 1px solid #ddd; border-radius: 6px; padding: 20px; max-height: 600px; overflow-y: auto; margin-top: 15px;">
                <table class="attributes-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Code</th>
                            <th>Label</th>
                            <th>Type</th>
                            <th>Input</th>
                            <th>Required</th>
                            <th>User Defined</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($m1AttributesMissingInM2 as $attr)
                            <tr id="attr-row-{{ $attr->attribute_id }}">
                                <td>{{ $attr->attribute_id }}</td>
                                <td style="font-weight: 500; color: #667eea;">{{ $attr->attribute_code }}</td>
                                <td>{{ $attr->frontend_label ?? 'N/A' }}</td>
                                <td style="color: #666;">{{ $attr->backend_type ?? 'N/A' }}</td>
                                <td style="color: #666;">{{ $attr->frontend_input ?? 'N/A' }}</td>
                                <td>
                                    @if($attr->is_required ?? 0)
                                        <span style="color: #d32f2f; font-weight: 600;">Yes</span>
                                    @else
                                        <span style="color: #666;">No</span>
                                    @endif
                                </td>
                                <td>
                                    @if($attr->is_user_defined ?? 0)
                                        <span style="color: #1976D2; font-weight: 600;">Yes</span>
                                    @else
                                        <span style="color: #666;">No</span>
                                    @endif
                                </td>
                                <td>
                                    <button 
                                        class="btn btn-primary" 
                                        onclick="migrateAttribute({{ $attr->attribute_id }}, '{{ $attr->attribute_code }}')"
                                        id="migrate-btn-{{ $attr->attribute_id }}"
                                        style="padding: 6px 12px; font-size: 0.85em;">
                                        Migrate
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div id="missingAttributesCount" style="margin-top: 15px; padding: 12px; background: #fff3cd; border-left: 4px solid #ffc107; border-radius: 4px;">
                <strong>Total:</strong> <span id="missingAttributesTotal">{{ $m1AttributesMissingInM2->count() }}</span> {{ Str::plural('attribute', $m1AttributesMissingInM2->count()) }} found in Magento 1 but not in Magento 2.
            </div>
        @else
            <div style="margin-top: 15px; padding: 15px; background: #d4edda; border-left: 4px solid #28a745; border-radius: 4px; color: #155724;">
                ✓ All Magento 1 attributes have matching attribute codes in Magento 2.
            </div>
        @endif
    </div>

    <!-- Category Attributes Section -->
    <div class="section" style="margin-top: 30px;">
        <h2>📋 Category Attributes</h2>
        <p>View all category attributes from Magento 1 and Magento 2</p>
        
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;">
            <!-- Magento 1 Attributes -->
            <div>
                <h3 style="margin-bottom: 15px; color: #667eea;">Magento 1 Attributes ({{ $m1Attributes->count() }})</h3>
                <div style="background: white; border: 1px solid #ddd; border-radius: 6px; padding: 20px; max-height: 600px; overflow-y: auto;">
                    @if($m1Attributes->count() > 0)
                        <table class="attributes-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Code</th>
                                    <th>Label</th>
                                    <th>Type</th>
                                    <th>Input</th>
                                    <th>Required</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($m1Attributes as $attr)
                                    <tr>
                                        <td>{{ $attr->attribute_id }}</td>
                                        <td style="font-weight: 500; color: #667eea;">{{ $attr->attribute_code }}</td>
                                        <td>{{ $attr->frontend_label ?? 'N/A' }}</td>
                                        <td style="color: #666;">{{ $attr->backend_type ?? 'N/A' }}</td>
                                        <td style="color: #666;">{{ $attr->frontend_input ?? 'N/A' }}</td>
                                        <td>
                                            @if($attr->is_required ?? 0)
                                                <span style="color: #d32f2f; font-weight: 600;">Yes</span>
                                            @else
                                                <span style="color: #666;">No</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @else
                        <div style="text-align: center; padding: 40px; color: #999;">
                            No attributes found.
                        </div>
                    @endif
                </div>
            </div>

            <!-- Magento 2 Attributes -->
            <div>
                <h3 style="margin-bottom: 15px; color: #764ba2;">Magento 2 Attributes ({{ $m2Attributes->count() }})</h3>
                <div style="background: white; border: 1px solid #ddd; border-radius: 6px; padding: 20px; max-height: 600px; overflow-y: auto;">
                    @if($m2Attributes->count() > 0)
                        <table class="attributes-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Code</th>
                                    <th>Label</th>
                                    <th>Type</th>
                                    <th>Input</th>
                                    <th>Required</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($m2Attributes as $attr)
                                    <tr>
                                        <td>{{ $attr->attribute_id }}</td>
                                        <td style="font-weight: 500; color: #764ba2;">{{ $attr->attribute_code }}</td>
                                        <td>{{ $attr->frontend_label ?? 'N/A' }}</td>
                                        <td style="color: #666;">{{ $attr->backend_type ?? 'N/A' }}</td>
                                        <td style="color: #666;">{{ $attr->frontend_input ?? 'N/A' }}</td>
                                        <td>
                                            @if($attr->is_required ?? 0)
                                                <span style="color: #d32f2f; font-weight: 600;">Yes</span>
                                            @else
                                                <span style="color: #666;">No</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @else
                        <div style="text-align: center; padding: 40px; color: #999;">
                            No attributes found.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- CSS is loaded globally via app.css --}}

@push('scripts')
    @vite(['resources/js/attributes.js'])
    <script>
        window.attributeRoutes = {
            migrateAttribute: '{{ route("attributes.migrate-attribute", ["attributeId" => ":id"]) }}',
            migrateAttributeGroup: '{{ route("attributes.migrate-attribute-group", ["groupId" => ":groupId", "setId" => ":setId"]) }}'
        };
    </script>
@endpush