@extends('backend.layouts.app')

@section('main-content')
<section class="content-header">
    <div class="container-fluid my-2">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Import Business</h1>
            </div>
            <div class="col-sm-6 text-right">
                <a href="{{ route('admin.business.index') }}" class="btn btn-primary">Back</a>
            </div>
        </div>
    </div>
</section>
<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Upload Excel File</h3>
            </div>
            <div class="card-body">
                <form id="importForm" enctype="multipart/form-data">
                    @csrf
                    <input type="file" name="businesses_excel" id="businesses_excel" class="form-control" required>
                    <div class="progress mt-3" style="height: 25px;">
                        <div id="upload-progress" class="progress-bar progress-bar-striped progress-bar-animated"
                            role="progressbar" style="width: 0%;">0%</div>
                    </div>
                </form>
            </div>
            <div class="card-footer">
                <button id="upload-btn" class="btn btn-primary">Upload and Import</button>
            </div>
        </div>
    </div>
</section>
@endsection

@push('bottom-scripts')
<script>
document.getElementById('upload-btn').addEventListener('click', async function(event) {
    event.preventDefault();
    let form = document.getElementById('importForm');
    let formData = new FormData(form);
    let progressBar = document.getElementById('upload-progress');
    
    try {
        // Initialize progress bar
        progressBar.style.width = '0%';
        progressBar.textContent = 'Uploading...';
        
        // Start the upload request
        const response = await fetch('{{ route('admin.business.import') }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
        });

        if (!response.ok) {
            throw new Error('Failed to start import process');
        }

        const data = await response.json();
        const importId = data.import_id;
        await trackImportProgress(importId, progressBar);
    } catch (error) {
        console.error('Import failed:', error);
        alert('Error occurred while importing businesses.');
        progressBar.style.width = '0%';
        progressBar.textContent = 'Error';
    }
});

async function trackImportProgress(importId, progressBar) {
    const checkProgress = async () => {
        try {
            const response = await fetch(`{{ url('admin/business/import-progress') }}/${importId}`);
            const data = await response.json();
            
            // Update progress bar
            progressBar.style.width = `${data.progress}%`;
            progressBar.textContent = `${data.progress.toFixed(2)}%`;

            if (data.completed) {
                progressBar.textContent = 'Import Completed!';
                alert('Import completed successfully!');
            } else {
                // Keep checking progress every second until complete
                setTimeout(checkProgress, 1000); 
            }
        } catch (error) {
            console.error('Error checking progress:', error);
            progressBar.textContent = 'Error checking progress';
        }
    };

    // Start checking progress
    checkProgress();
}
</script>
@endpush