@include('header')
<div class="container-fluid flex-grow-1 container-p-y">
    <h4 class="font-weight-bold py-3 mb-0">Database Backup</h4>

    <div class="card mb-4">
        <div class="card-body">
            <p class="text-muted mb-3">
                Click the button below to create a full MySQL database backup.
                Files are saved in <code>storage/app/backup</code>.
            </p>

            <button type="button" class="btn btn-primary" id="takeDbBackupBtn">
                Take DB Backup
            </button>

            <div id="dbBackupResult" class="mt-4"></div>
        </div>
    </div>
</div>

@include('footerscript')
<script type="text/javascript">
$(document).ready(function() {
    function showBackupMessage(type, html) {
        var alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        $('#dbBackupResult').html('<div class="alert ' + alertClass + '">' + html + '</div>');
    }

    $('#takeDbBackupBtn').on('click', function() {
        var $btn = $(this);
        $btn.prop('disabled', true).text('Please Wait...');
        $('#dbBackupResult').html('');

        $.ajax({
            url: "{{ url('runDbBackup') }}",
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(res) {
                if (res.status === 1) {
                    showBackupMessage(
                        'success',
                        '<strong>Backup completed.</strong><br>' +
                        'File: <strong>' + res.filename + '</strong><br>' +
                        'Size: <strong>' + res.size_label + '</strong><br>' +
                        'Folder: <code>' + res.saved_at + '</code>'
                    );
                } else {
                    showBackupMessage('error', res.message || 'Backup failed.');
                }
            },
            error: function(xhr) {
                var message = 'Backup failed. Please try again.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                showBackupMessage('error', message);
            },
            complete: function() {
                $btn.prop('disabled', false).text('Take DB Backup');
            }
        });
    });
});
</script>