@extends('layouts.app')

@section('title', 'Backup Details')

@section('content')
<div class="py-6">
    <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-6">
            <a href="{{ route('admin.backups.index') }}" class="inline-flex items-center text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white mb-4">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
                Back to Backups
            </a>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ $info['name'] }}</h1>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Backup details and restore options</p>
        </div>

        <!-- Backup Info Card -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden mb-6">
            <div class="p-6">
                <div class="flex items-start justify-between">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 h-16 w-16 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center">
                            <svg class="w-8 h-8 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
                            </svg>
                        </div>
                        <div class="ml-4">
                            @php
                                $typeColors = [
                                    'full' => 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
                                    'database_only' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
                                    'files_only' => 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400',
                                ];
                                $typeLabels = [
                                    'full' => 'Full Backup',
                                    'database_only' => 'Database Only',
                                    'files_only' => 'Files Only',
                                ];
                            @endphp
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $typeColors[$info['type']] ?? 'bg-gray-100 text-gray-800' }}">
                                {{ $typeLabels[$info['type']] ?? $info['type'] }}
                            </span>
                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                                Created on {{ \Carbon\Carbon::parse($info['created_at'])->format('d M Y \a\t H:i') }}
                            </p>
                        </div>
                    </div>
                </div>

                @if($info['notes'])
                    <div class="mt-4 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                        <p class="text-sm text-gray-600 dark:text-gray-300">
                            <strong>Notes:</strong> {{ $info['notes'] }}
                        </p>
                    </div>
                @endif

                <dl class="mt-6 grid grid-cols-2 gap-4">
                    <div class="border border-gray-200 dark:border-gray-600 rounded-lg p-4">
                        <dt class="text-sm text-gray-500 dark:text-gray-400">Created By</dt>
                        <dd class="mt-1 text-lg font-medium text-gray-900 dark:text-white">{{ $info['created_by'] }}</dd>
                    </div>

                    @if($info['database_backup'])
                        <div class="border border-gray-200 dark:border-gray-600 rounded-lg p-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Database Size</dt>
                            <dd class="mt-1 text-lg font-medium text-gray-900 dark:text-white">{{ $info['database_size'] ?? 'N/A' }}</dd>
                        </div>
                    @endif

                    @if($info['files_backup'])
                        <div class="border border-gray-200 dark:border-gray-600 rounded-lg p-4">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Files Size</dt>
                            <dd class="mt-1 text-lg font-medium text-gray-900 dark:text-white">{{ $info['files_size'] ?? 'N/A' }}</dd>
                        </div>
                    @endif
                </dl>

                <!-- Download Links -->
                <div class="mt-6 flex flex-wrap gap-3">
                    @if($info['database_backup'])
                        <a href="{{ route('admin.backups.download', [$name, 'database']) }}"
                           class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                            </svg>
                            Download Database SQL
                        </a>
                    @endif

                    @if($info['files_backup'])
                        <a href="{{ route('admin.backups.download', [$name, 'files']) }}"
                           class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                            </svg>
                            Download Files ZIP
                        </a>
                    @endif
                </div>
            </div>
        </div>

        <!-- Restore Section -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Restore from this Backup</h2>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Restore your system to this backup point</p>
            </div>

            <form action="{{ route('admin.backups.restore', $name) }}" method="POST" id="restoreForm">
                @csrf

                <div class="p-6 space-y-6">
                    <!-- Warning -->
                    <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                        <div class="flex">
                            <svg class="w-5 h-5 text-red-600 dark:text-red-400 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                            </svg>
                            <div>
                                <h3 class="text-sm font-medium text-red-800 dark:text-red-200">Warning: This action is destructive!</h3>
                                <p class="mt-1 text-sm text-red-700 dark:text-red-300">
                                    Restoring will overwrite current data. A safety backup will be created automatically before restore.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Restore Type -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            What to Restore
                        </label>
                        <div class="space-y-3">
                            @if($info['database_backup'] && $info['files_backup'])
                                <label class="flex items-start p-4 border border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                    <input type="radio" name="restore_type" value="full" class="mt-1 text-red-600 focus:ring-red-500" checked>
                                    <div class="ml-3">
                                        <span class="block text-sm font-medium text-gray-900 dark:text-white">Full Restore</span>
                                        <span class="block text-sm text-gray-500 dark:text-gray-400">Restore both database and files</span>
                                    </div>
                                </label>
                            @endif

                            @if($info['database_backup'])
                                <label class="flex items-start p-4 border border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                    <input type="radio" name="restore_type" value="database_only" class="mt-1 text-red-600 focus:ring-red-500" {{ !$info['files_backup'] ? 'checked' : '' }}>
                                    <div class="ml-3">
                                        <span class="block text-sm font-medium text-gray-900 dark:text-white">Database Only</span>
                                        <span class="block text-sm text-gray-500 dark:text-gray-400">Only restore database, keep current files</span>
                                    </div>
                                </label>
                            @endif

                            @if($info['files_backup'])
                                <label class="flex items-start p-4 border border-gray-200 dark:border-gray-600 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                    <input type="radio" name="restore_type" value="files_only" class="mt-1 text-red-600 focus:ring-red-500" {{ !$info['database_backup'] ? 'checked' : '' }}>
                                    <div class="ml-3">
                                        <span class="block text-sm font-medium text-gray-900 dark:text-white">Files Only</span>
                                        <span class="block text-sm text-gray-500 dark:text-gray-400">Only restore files, keep current database</span>
                                    </div>
                                </label>
                            @endif
                        </div>
                    </div>

                    <!-- Confirmation -->
                    <div class="flex items-center">
                        <input type="checkbox" name="confirm" id="confirm" value="1" required
                               class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded">
                        <label for="confirm" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                            I understand this will overwrite current data and want to proceed
                        </label>
                    </div>
                </div>

                <!-- Submit -->
                <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700/50 flex items-center justify-between">
                    <a href="{{ route('admin.backups.index') }}"
                       class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
                        Cancel
                    </a>
                    <button type="submit"
                            id="restoreBtn"
                            class="inline-flex items-center px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                        </svg>
                        <span id="restoreBtnText">Restore Backup</span>
                    </button>
                </div>
            </form>
        </div>

        <!-- Delete Section -->
        <div class="mt-6 flex justify-end">
            <form action="{{ route('admin.backups.destroy', $name) }}" method="POST"
                  onsubmit="return confirm('Are you sure you want to delete this backup? This cannot be undone.')">
                @csrf
                @method('DELETE')
                <button type="submit"
                        class="inline-flex items-center px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                    Delete this Backup
                </button>
            </form>
        </div>
    </div>
</div>

<script>
document.getElementById('restoreForm').addEventListener('submit', function(e) {
    if (!confirm('Are you absolutely sure you want to restore from this backup? Current data will be overwritten.')) {
        e.preventDefault();
        return;
    }

    const btn = document.getElementById('restoreBtn');
    const btnText = document.getElementById('restoreBtnText');

    btn.disabled = true;
    btnText.innerHTML = '<svg class="animate-spin -ml-1 mr-2 h-5 w-5 text-white inline-block" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Restoring...';
});
</script>
@endsection