@extends('layouts.admin')

@section('title', '恢复数据库')

@section('page-title', '恢复数据库')

@section('content')
<div class="restore-container">
    <div class="warning-box">
        <h3>警告：数据库恢复操作</h3>
        <p>您即将从备份文件恢复数据库。此操作将<strong>覆盖当前数据库中的所有数据</strong>，且无法撤销！</p>
    </div>

    <div class="backup-info">
        <h4>备份文件信息</h4>
        <table class="info-table">
            <tr>
                <th>文件名</th>
                <td><code>{{ $backup['filename'] }}</code></td>
            </tr>
            <tr>
                <th>文件大小</th>
                <td>{{ $backup['size'] }}</td>
            </tr>
            <tr>
                <th>创建时间</th>
                <td>{{ $backup['created_at'] }}</td>
            </tr>
        </table>
    </div>

    <div class="action-buttons">
        <form action="{{ route('admin.backup.restore', $backup['filename']) }}" method="POST" style="display: inline;">
            @csrf
            <input type="hidden" name="confirm" value="1">
            <button type="submit" class="btn btn-danger" onclick="return confirm('确定要恢复数据库吗？此操作将覆盖当前所有数据！');">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="1 4 1 10 7 10"></polyline>
                    <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
                </svg>
                确认恢复
            </button>
        </form>
        <a href="{{ route('admin.backup.index') }}" class="btn btn-secondary">
            取消
        </a>
    </div>
</div>

<style>
    .restore-container {
        max-width: 600px;
        margin: 0 auto;
    }

    .warning-box {
        background: #fef2f2;
        border: 1px solid #ef4444;
        border-radius: 0.5rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .warning-box h3 {
        color: #dc2626;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .warning-box h3::before {
        content: "⚠️";
    }

    .warning-box p {
        color: #991b1b;
        margin: 0;
    }

    .backup-info {
        background: white;
        border-radius: 0.5rem;
        padding: 1.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        margin-bottom: 2rem;
    }

    .backup-info h4 {
        margin-bottom: 1rem;
        color: #374151;
    }

    .info-table {
        width: 100%;
    }

    .info-table th {
        text-align: left;
        padding: 0.5rem 0;
        color: #6b7280;
        width: 100px;
    }

    .info-table td {
        padding: 0.5rem 0;
    }

    .info-table code {
        background: #f3f4f6;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.875rem;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        border-radius: 0.375rem;
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
    }

    .btn-danger {
        background: #ef4444;
        color: white;
    }

    .btn-danger:hover {
        background: #dc2626;
    }

    .btn-secondary {
        background: #6b7280;
        color: white;
    }

    .btn-secondary:hover {
        background: #4b5563;
    }

    .btn svg {
        vertical-align: middle;
    }
</style>
@endsection