@extends('layouts.app')

@section('content')
<div class="container text-center">
    <h3>Remote DB Backup</h3>

  <div class="d-flex justify-content-center gap-2 mt-3">
    <button onclick="startBackup()" class="btn btn-primary">Start Backup</button>
    <a href="{{ route('home') }}" class="btn btn-secondary">← Back to Home</a>
</div>
    <div id="loader" style="display:none; margin-top: 20px;">
        <p>Generating backup, please wait...</p>
        <img src="{{ asset('images/loader.gif') }}" alt="Loading..." width="100">
    </div>

    <div id="result" style="margin-top: 20px;"></div>

    <script>
        function startBackup() {
            document.getElementById('loader').style.display = 'block';
            document.getElementById('result').innerHTML = '';

            fetch("{{ url('backup.php') }}")
                .then(response => response.text())
                .then(data => {
                    document.getElementById('loader').style.display = 'none';
                    document.getElementById('result').innerHTML = data;
                })
                .catch(error => {
                    document.getElementById('loader').style.display = 'none';
                    document.getElementById('result').innerHTML = "<div class='alert alert-danger'>Error: " + error + "</div>";
                });
        }
    </script>
</div>
@endsection