@extends('layouts.adminlte')

@section('title', 'Backup Project')
@section('page_title', 'Backup Project')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title mb-0">Project Backups</h3>
            <div class="d-flex gap-2 align-items-center">
                <input type="text" class="form-control form-control-sm" id="backupName" style="width: 240px;" placeholder="Backup name (optional)" />
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="includeVendor" />
                    <label class="form-check-label" for="includeVendor">Include vendor</label>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="includeDatabase" />
                    <label class="form-check-label" for="includeDatabase">Include database</label>
                </div>
                <select id="dumpCompat" class="form-select form-select-sm" style="width: 170px;">
                    <option value="auto" selected>Dump: Auto</option>
                    <option value="mysql">Dump: MySQL</option>
                    <option value="mariadb">Dump: MariaDB</option>
                </select>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" id="databaseOnly" />
                    <label class="form-check-label" for="databaseOnly">Database only</label>
                </div>
                <button class="btn btn-outline-secondary btn-sm" id="btnOpenBackupFolder" data-path="{{ $backupPath }}">
                    <i class="fas fa-folder-open me-1"></i>Open Folder
                </button>
                <button class="btn btn-primary btn-sm" id="btnCreateBackup">
                    <i class="fas fa-database me-1"></i>Backup Now
                </button>
            </div>
        </div>
        <div class="card-body">
            <p class="text-muted mb-3">
                Backup akan disimpan di <code>storage/app/project-backups</code>.
                Folder <code>node_modules</code>, <code>.git</code>, <code>storage/logs</code>, <code>storage/framework</code>, <code>bootstrap/cache</code>, dan folder backup akan di-skip.
                Jika pilih <code>Include database</code>, butuh <code>mysqldump</code> tersedia di server.
                Opsi <code>Dump: MariaDB</code> akan mengubah collation MySQL 8 seperti <code>utf8mb4_0900_ai_ci</code> menjadi collation yang lebih aman untuk MariaDB,
                serta membersihkan clause encryption MySQL 8 yang sering bikin import gagal.
                Pilih <code>Database only</code> jika ingin export database saja (tanpa file project).
            </p>
            <div class="table-responsive">
                <table id="backupTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>File</th>
                            <th>Size</th>
                            <th>Updated</th>
                            <th style="width:170px">Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
        <script>
        $(function () {
            const tryOpenFolder = async (path) => {
                if (!path) return;
                const fileUrl = 'file:///' + path.replace(/\\/g, '/');
                const opened = window.open(fileUrl, '_blank');
                if (!opened) {
                    try {
                        await navigator.clipboard.writeText(path);
                        Swal.fire('Info', 'Path disalin ke clipboard. Buka folder manual di File Explorer.', 'info');
                    } catch (err) {
                        Swal.fire('Info', `Buka folder manual: ${path}`, 'info');
                    }
                }
            };

            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) {
                $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
            }

            let rowsCache = [];
            const table = $('#backupTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: 'name' },
                    { data: 'size', render: (v) => `${Number(v || 0).toLocaleString()} bytes` },
                    { data: 'updated_at' },
                    {
                        data: null,
                        orderable: false,
                        render: (data, type, row) => `
                            <a class="btn btn-sm btn-outline-success" href="{{ url('/backup-project/download') }}/${encodeURIComponent(row.name)}">
                                <i class="fas fa-download me-1"></i>Download
                            </a>
                            <button class="btn btn-sm btn-outline-danger btn-delete" data-name="${row.name}">
                                <i class="fas fa-trash me-1"></i>Delete
                            </button>
                        `
                    }
                ]
            });

            const loadData = () => {
                $.getJSON('{{ route('backup_project.data') }}')
                    .done((resp) => {
                        rowsCache = resp.data || [];
                        table.clear().rows.add(rowsCache).draw();
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Failed load backups', 'error');
                    });
            };

            const pollProgress = (jobId, onDone) => {
                let timer = null;
                const updateSwal = (percent, message) => {
                    const safePercent = Math.min(100, Math.max(0, Number(percent || 0)));
                    Swal.update({
                        html: `
                            <div class="text-muted mb-2">${message || 'Memproses backup...'}</div>
                            <div class="progress" style="height: 16px;">
                                <div class="progress-bar" role="progressbar" style="width: ${safePercent}%;">
                                    ${safePercent}%
                                </div>
                            </div>
                        `
                    });
                };

                const fetchStatus = () => {
                    $.getJSON(`{{ route('backup_project.status', ['id' => '__ID__']) }}`.replace('__ID__', encodeURIComponent(jobId)))
                        .done((resp) => {
                            if (resp.status === 'error') {
                                clearInterval(timer);
                                Swal.fire('Error', resp.message || 'Backup failed', 'error');
                                return;
                            }
                            const hint = resp?.hint ? `<div class="small text-danger mt-2">${resp.hint}</div>` : '';
                            const log = resp?.log_file ? `<div class="small text-muted mt-1">log: ${resp.log_file}</div>` : '';
                            updateSwal(resp.percent, `${resp.message || ''}${log}${hint}`);
                            if (resp.status === 'done') {
                                clearInterval(timer);
                                onDone(resp);
                            }
                        })
                        .fail(() => {
                            clearInterval(timer);
                            Swal.fire('Error', 'Gagal membaca status backup', 'error');
                        });
                };

                timer = setInterval(fetchStatus, 1200);
                fetchStatus();
            };

            $('#btnCreateBackup').on('click', function () {
                const dbOnly = $('#databaseOnly').is(':checked');
                const payload = {
                    name: ($('#backupName').val() || '').toString().trim(),
                    include_vendor: dbOnly ? 0 : ($('#includeVendor').is(':checked') ? 1 : 0),
                    include_database: dbOnly ? 1 : ($('#includeDatabase').is(':checked') ? 1 : 0),
                    dump_compat: ($('#dumpCompat').val() || 'auto').toString(),
                    database_only: dbOnly ? 1 : 0,
                };

                const btn = $(this);
                btn.prop('disabled', true);
                Swal.fire({
                    title: 'Backup sedang berjalan...',
                    html: `
                        <div class="text-muted mb-2">Memulai backup...</div>
                        <div class="progress" style="height: 16px;">
                            <div class="progress-bar" role="progressbar" style="width: 0%;">0%</div>
                        </div>
                    `,
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
                $.ajax({
                    url: '{{ route('backup_project.store') }}',
                    type: 'POST',
                    data: payload
                }).done((resp) => {
                    const jobId = resp?.job_id;
                    if (!jobId) {
                        Swal.fire('Error', 'Job backup tidak ditemukan', 'error');
                        return;
                    }
                    pollProgress(jobId, (result) => {
                        loadData();
                        Swal.fire({
                            icon: 'success',
                            title: 'Backup selesai',
                            text: `${result?.message || 'Backup created'} | File: ${result?.file || '-'}${result?.files_added ? ' | Files: ' + result.files_added : ''}`,
                            showCancelButton: true,
                            confirmButtonText: 'Open Folder',
                            cancelButtonText: 'OK'
                        }).then((res) => {
                            if (res.isConfirmed) {
                                const path = $('#btnOpenBackupFolder').data('path');
                                tryOpenFolder(path);
                            }
                        });
                    });
                }).fail((xhr) => {
                    Swal.fire('Error', xhr.responseJSON?.message || 'Backup failed', 'error');
                }).always(() => {
                    btn.prop('disabled', false);
                });
            });

            $('#databaseOnly').on('change', function () {
                const active = $(this).is(':checked');
                if (active) {
                    $('#includeDatabase').prop('checked', true);
                    $('#includeVendor').prop('checked', false);
                }
                $('#includeDatabase').prop('disabled', active);
                $('#includeVendor').prop('disabled', active);
            });

            $('#btnOpenBackupFolder').on('click', function () {
                tryOpenFolder($(this).data('path'));
            });

            $('#backupTable').on('click', '.btn-delete', function () {
                const name = $(this).data('name');
                Swal.fire({
                    title: `Delete backup ${name}?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/backup-project') }}/${encodeURIComponent(name)}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        loadData();
                        Swal.fire('Deleted', resp?.message || 'Backup deleted', 'success');
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error');
                    });
                });
            });

            loadData();
        });
    </script>
@endpush