<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目比对结果</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .table-container {
            overflow-x: auto;
        }
        table {
            min-width: 600px;
        }
        .tooltip {
            position: relative;
            display: inline-block;
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 200px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -100px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 0.8em;
        }
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body class="bg-gray-50 p-4 md:p-8">
<div class="max-w-7xl mx-auto bg-white rounded-lg shadow-md p-6">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">项目比对结果</h1>

    <!-- 错误提示 -->
    @if($error)
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
            <i class="fa fa-exclamation-circle mr-2"></i>{{ $error }}
        </div>
    @else
        <!-- 统计摘要 -->
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-8">
            <h2 class="text-lg font-semibold text-blue-800 mb-2">
                <i class="fa fa-bar-chart mr-2"></i>统计摘要
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="flex justify-between">
                    <span class="text-gray-600">TXT文件总项目数：</span>
                    <span class="font-medium">{{ $summary['txt_total'] }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">数据库总项目数：</span>
                    <span class="font-medium">{{ $summary['db_total'] }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">仅TXT存在：</span>
                    <span class="font-medium text-orange-600">{{ $summary['only_in_txt_count'] }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">仅数据库存在：</span>
                    <span class="font-medium text-purple-600">{{ $summary['only_in_db_count'] }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">两者都存在：</span>
                    <span class="font-medium text-green-600">{{ $summary['in_both_count'] }}</span>
                </div>
            </div>
        </div>

        <!-- 仅TXT存在的项目 -->
        <div class="mb-8">
            <h2 class="text-xl font-semibold text-orange-600 mb-3">
                <i class="fa fa-file-text-o mr-2"></i>仅TXT文件中存在的项目（{{ count($onlyInTxt) }}项）
            </h2>
            <div class="table-container">
                <table class="min-w-full bg-white border border-gray-200">
                    <thead>
                    <tr class="bg-gray-100">
                        <th class="py-2 px-4 border-b text-left">序号</th>
                        <th class="py-2 px-4 border-b text-left">项目名称</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($onlyInTxt as $index => $name)
                        <tr class="{{ $index % 2 == 0 ? 'bg-white' : 'bg-gray-50' }}">
                            <td class="py-2 px-4 border-b">{{ $index + 1 }}</td>
                            <td class="py-2 px-4 border-b">{{ $name }}</td>
                        </tr>
                    @endforeach
                    @if(empty($onlyInTxt))
                        <tr>
                            <td colspan="2" class="py-3 px-4 text-center text-gray-500">无数据</td>
                        </tr>
                    @endif
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 仅数据库存在的项目 -->
        <div class="mb-8">
            <h2 class="text-xl font-semibold text-purple-600 mb-3">
                <i class="fa fa-database mr-2"></i>仅数据库中存在的项目（{{ count($onlyInDb) }}项）
            </h2>
            <div class="table-container">
                <table class="min-w-full bg-white border border-gray-200">
                    <thead>
                    <tr class="bg-gray-100">
                        <th class="py-2 px-4 border-b text-left">序号</th>
                        <th class="py-2 px-4 border-b text-left">项目名称</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($onlyInDb as $index => $name)
                        <tr class="{{ $index % 2 == 0 ? 'bg-white' : 'bg-gray-50' }}">
                            <td class="py-2 px-4 border-b">{{ $index + 1 }}</td>
                            <td class="py-2 px-4 border-b">{{ $name }}</td>
                        </tr>
                    @endforeach
                    @if(empty($onlyInDb))
                        <tr>
                            <td colspan="2" class="py-3 px-4 text-center text-gray-500">无数据</td>
                        </tr>
                    @endif
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 两者都存在的项目（带设备关联） -->
        <div>
            <h2 class="text-xl font-semibold text-green-600 mb-3">
                <i class="fa fa-exchange mr-2"></i>两者都存在的项目（{{ count($inBoth) }}项）
            </h2>
            <div class="table-container">
                <table class="min-w-full bg-white border border-gray-200">
                    <thead>
                    <tr class="bg-gray-100">
                        <th class="py-2 px-4 border-b text-left">序号</th>
                        <th class="py-2 px-4 border-b text-left">项目名称</th>
                        <th class="py-2 px-4 border-b text-left">s_check_item ID</th>
                        <th class="py-2 px-4 border-b text-left">设备数量</th>
                        <th class="py-2 px-4 border-b text-left">设备ID</th>
                        <th class="py-2 px-4 border-b text-left">TXT中的scheduleName</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($inBoth as $index => $item)
                        <tr class="{{ $index % 2 == 0 ? 'bg-white' : 'bg-gray-50' }}">
                            <td class="py-2 px-4 border-b">{{ $index + 1 }}</td>
                            <td class="py-2 px-4 border-b">{{ $item['name'] }}</td>
                            <td class="py-2 px-4 border-b">{{ $item['check_item_id'] ?: '-' }}</td>
                            <td class="py-2 px-4 border-b">{{ $item['device_count'] }}</td>
                            <td class="py-2 px-4 border-b">
                                @if(!empty($item['device_ids']))
                                    <div class="tooltip">
                                        {{ implode(', ', $item['device_ids']) }}
                                        @if(count($item['device_ids']) > 3)
                                            <span class="tooltiptext">共 {{ count($item['device_ids']) }} 个设备ID</span>
                                        @endif
                                    </div>
                                @else
                                    -
                                @endif
                            </td>
                            <td class="py-2 px-4 border-b">
                                @if(!empty($item['schedule_names']))
                                    <div class="tooltip">
                                        {{ implode(', ', $item['schedule_names']) }}
                                        @if(count($item['schedule_names']) > 2)
                                            <span class="tooltiptext">共 {{ count($item['schedule_names']) }} 个地点</span>
                                        @endif
                                    </div>
                                @else
                                    -
                                @endif
                            </td>
                        </tr>
                    @endforeach
                    @if(empty($inBoth))
                        <tr>
                            <td colspan="6" class="py-3 px-4 text-center text-gray-500">无数据</td>
                        </tr>
                    @endif
                    </tbody>
                </table>
            </div>
        </div>
    @endif
</div>
</body>
</html>
