@extends('layouts.admin')

@section('title', '博客管理')

@section('page-title', '博客管理')

@section('content')
<div style="margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center;">
    <a href="{{ route('admin.blog.create') }}" class="btn btn-primary">
        ➕ 添加新博客
    </a>
    <button type="button" class="btn btn-danger" onclick="submitBulkDelete()">
        🗑️ 批量删除
    </button>
</div>

<!-- 批量删除表单独立在外面 -->
<form id="bulkDeleteForm" action="{{ route('admin.blog.bulk-delete') }}" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
    <input type="hidden" name="ids" id="selectedIds" value="">
</form>

<table style="width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
        <thead style="background: #f9fafb; border-bottom: 2px solid #e5e7eb;">
            <tr>
                <th style="width: 40px; padding: 1rem; text-align: left; font-weight: 600; color: #374151; font-size: 0.875rem;">
                    <input type="checkbox" id="selectAll" onchange="toggleAllCheckboxes()" style="cursor: pointer;">
                </th>
                <th style="width: 50px; padding: 1rem; text-align: left; font-weight: 600; color: #374151; font-size: 0.875rem;">ID</th>
                <th style="width: 80px; padding: 1rem; text-align: left; font-weight: 600; color: #374151; font-size: 0.875rem;">封面</th>
                <th style="width: 350px; padding: 1rem; text-align: left; font-weight: 600; color: #374151; font-size: 0.875rem;">标题</th>
                <th style="width: 100px; padding: 1rem; text-align: left; font-weight: 600; color: #374151; font-size: 0.875rem;">分类</th>
                <th style="width: 70px; padding: 1rem; text-align: left; font-weight: 600; color: #374151; font-size: 0.875rem;">发布</th>
                <th style="width: 70px; padding: 1rem; text-align: left; font-weight: 600; color: #374151; font-size: 0.875rem;">推荐</th>
                <th style="width: 70px; padding: 1rem; text-align: left; font-weight: 600; color: #374151; font-size: 0.875rem;">浏览</th>
                <th style="width: 120px; padding: 1rem; text-align: left; font-weight: 600; color: #374151; font-size: 0.875rem;">发布时间</th>
                <th style="width: 150px; padding: 1rem; text-align: left; font-weight: 600; color: #374151; font-size: 0.875rem;">操作</th>
            </tr>
        </thead>
        <tbody>
            @foreach($blogs as $item)
            <tr style="border-bottom: 1px solid #e5e7EB; transition: background 0.2s;">
                <td style="padding: 1rem; text-align: left;">
                    <input type="checkbox" name="ids[]" value="{{ $item->id }}" class="blog-checkbox" style="cursor: pointer;">
                </td>
                <td style="padding: 1rem; text-align: left; font-weight: 500; color: #374151;">{{ $item->id }}</td>
                <td style="padding: 1rem; text-align: left;">
                    @if($item->cover_image)
                    <img src="{{ $item->cover_image }}" alt="{{ $item->title }}"
                         style="width: 80px; height: 60px; object-fit: cover; border-radius: 4px; border: 1px solid #e5e7eb;">
                    @else
                    <span style="color: #9ca3af; font-size: 0.8rem;">无图片</span>
                    @endif
                </td>
                <td style="padding: 1rem; text-align: left;">
                    <div style="font-weight: 500; font-size: 0.9rem; color: #374151; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ $item->title }}">
                        {{ $item->title }}
                    </div>
                    @if($item->slug)
                    <div style="color: #6b7280; font-size: 0.75rem; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.25rem;">
                        {{ $item->slug }}
                    </div>
                    @endif
                </td>
                <td style="padding: 1rem; text-align: left;">
                    @if($item->category)
                    <span style="padding: 0.2rem 0.5rem; background: #e0e7ff; color: #4338ca; border-radius: 4px; font-size: 0.75rem;">
                        {{ $item->category }}
                    </span>
                    @else
                    <span style="color: #9ca3af; font-size: 0.8rem;">-</span>
                    @endif
                </td>
                <td style="padding: 1rem; text-align: left;">
                    <form action="{{ route('admin.blog.toggle-publish', $item->id) }}" method="POST" style="display: inline;">
                        @csrf
                        @method('PUT')
                        <button type="submit" class="btn btn-sm {{ $item->is_published ? 'btn-primary' : 'btn-secondary' }}"
                                style="padding: 0.25rem 0.5rem; font-size: 0.75rem;">
                            {{ $item->is_published ? '✓ 是' : '✗ 否' }}
                        </button>
                    </form>
                </td>
                <td style="padding: 1rem; text-align: left;">
                    <form action="{{ route('admin.blog.toggle-featured', $item->id) }}" method="POST" style="display: inline;">
                        @csrf
                        @method('PUT')
                        <button type="submit" class="btn btn-sm {{ $item->is_featured ? 'btn-primary' : 'btn-secondary' }}"
                                style="padding: 0.25rem 0.5rem; font-size: 0.75rem;">
                            {{ $item->is_featured ? '⭐ 是' : '○ 否' }}
                        </button>
                    </form>
                </td>
                <td style="padding: 1rem; text-align: left; color: #6b7280;">{{ $item->view_count }}</td>
                <td style="padding: 1rem; text-align: left; color: #6b7280;">{{ $item->formatted_published_at }}</td>
                <td style="padding: 1rem; text-align: left;">
                    <a href="{{ route('admin.blog.edit', $item->id) }}" class="btn btn-sm btn-primary" style="margin-right: 0.5rem;">
                        编辑
                    </a>
                    <form action="{{ route('admin.blog.destroy', $item->id) }}" method="POST" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('确定要删除这条博客吗?')">
                            删除
                        </button>
                    </form>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

@if($blogs->count() === 0)
    <div style="text-align: center; padding: 3rem; color: #6b7280; background: white; border-radius: 8px; margin-top: 1rem;">
        暂无博客数据
    </div>
@endif

@if($blogs->hasPages())
<div style="margin-top: 2rem; text-align: center;">
    {{ $blogs->links() }}
</div>
@endif

<script>
    function toggleAllCheckboxes() {
        const selectAll = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.blog-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = selectAll.checked;
        });
    }

    function submitBulkDelete() {
        console.log('开始批量删除...');

        // 获取所有选中的复选框
        const checkboxes = document.querySelectorAll('.blog-checkbox:checked');
        console.log('选中的复选框数量:', checkboxes.length);

        if (checkboxes.length === 0) {
            alert('请先选择要删除的博客！');
            return;
        }

        // 收集选中的ID
        const selectedIds = [];
        checkboxes.forEach(checkbox => {
            selectedIds.push(checkbox.value);
        });
        console.log('选中的ID:', selectedIds);

        // 确认删除
        if (!confirm('确定要删除选中的 ' + selectedIds.length + ' 条博客吗？')) {
            return;
        }

        // 设置隐藏字段的值
        const selectedIdsInput = document.getElementById('selectedIds');
        if (selectedIdsInput) {
            selectedIdsInput.value = JSON.stringify(selectedIds);
            console.log('设置的ids值:', selectedIdsInput.value);
        } else {
            console.error('找不到selectedIds输入框');
            return;
        }

        // 获取表单
        const form = document.getElementById('bulkDeleteForm');
        if (!form) {
            console.error('找不到bulkDeleteForm表单');
            return;
        }

        console.log('表单action:', form.action);
        console.log('表单method:', form.method);

        // 提交表单
        console.log('正在提交表单...');
        form.submit();
    }
</script>
@endsection