@extends('layouts.app')

@section('title', 'Import Data - SIAKAD')
@section('page-title', 'Import Data dari Excel')

@section('content')

{{-- Progress Modal (shown when import is processing) --}}
@if(session('import_job_id'))
<div id="importProgressContainer" class="card mb-4 border-primary">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="bi bi-hourglass-split me-2"></i>Import Sedang Diproses</h5>
    </div>
    <div class="card-body">
        <div class="d-flex align-items-center mb-2">
            <div class="spinner-border spinner-border-sm me-3" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <span id="importStatusText">Memproses...</span>
        </div>
        <div class="progress mb-2" style="height: 25px;">
            <div id="importProgressBar" class="progress-bar progress-bar-striped progress-bar-animated"
                 role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
        </div>
        <div class="d-flex justify-content-between small text-muted">
            <span id="importProcessed">0 / 0 baris</span>
            <span id="importStats"></span>
        </div>
    </div>
</div>
@endif

{{-- Active Import Jobs (if any running) --}}
@php
$activeJob = isset($recentJobs) ? $recentJobs->whereIn('status', ['pending', 'processing'])->first() : null;
@endphp

@if($activeJob && !session('import_job_id'))
<div id="importProgressContainer" class="card mb-4 border-warning">
    <div class="card-header bg-warning text-dark">
        <h5 class="mb-0"><i class="bi bi-clock-history me-2"></i>Import Sebelumnya Belum Selesai</h5>
    </div>
    <div class="card-body">
        <div class="d-flex align-items-center mb-2">
            <span class="badge bg-warning text-dark me-2">{{ $activeJob->status }}</span>
            <span>{{ $activeJob->filename }}</span>
        </div>
        <div class="progress mb-2" style="height: 25px;">
            <div id="importProgressBar" class="progress-bar bg-warning" role="progressbar"
                 style="width: {{ $activeJob->progress_percent }}%" aria-valuenow="{{ $activeJob->progress_percent }}" aria-valuemin="0" aria-valuemax="100">
                {{ $activeJob->progress_percent }}%
            </div>
        </div>
        <div class="d-flex justify-content-between small text-muted">
            <span>{{ $activeJob->processed_rows }} / {{ $activeJob->total_rows }} baris diproses</span>
            <span>{{ $activeJob->created_rows }} dibuat, {{ $activeJob->updated_rows }} diupdate</span>
        </div>
    </div>
</div>
@endif

<div class="row">
    {{-- Mahasiswa --}}
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-mortarboard me-2"></i>Import Mahasiswa</h5>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <a href="{{ route('admin.import.template.mahasiswa') }}" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-download me-1"></i>Download Template
                    </a>
                    <span class="badge bg-info">{{ App\Models\Mahasiswa::count() }} data</span>
                </div>

                <form action="{{ route('admin.import.mahasiswa') }}" method="POST" enctype="multipart/form-data" id="importFormMahasiswa">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Pilih File Excel</label>
                        <input type="file" name="file" class="form-control @error('file') is-invalid @enderror" accept=".xlsx,.xls" required>
                        @error('file')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <button type="submit" class="btn btn-primary w-100" id="btnImportMahasiswa">
                        <i class="bi bi-upload me-1"></i>Import Mahasiswa
                    </button>
                </form>

                <div class="mt-3">
                    <small class="text-muted">
                        <i class="bi bi-info-circle me-1"></i>
                        Format file: .xlsx atau .xls. Template dapat di-download terlebih dahulu.
                    </small>
                </div>
            </div>
        </div>
    </div>

    {{-- Dosen --}}
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-person-badge me-2"></i>Import Dosen</h5>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <a href="{{ route('admin.import.template.dosen') }}" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-download me-1"></i>Download Template
                    </a>
                    <span class="badge bg-info">{{ App\Models\Dosen::count() }} data</span>
                </div>

                <form action="{{ route('admin.import.dosen') }}" method="POST" enctype="multipart/form-data" id="importFormDosen">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Pilih File Excel</label>
                        <input type="file" name="file" class="form-control @error('file') is-invalid @enderror" accept=".xlsx,.xls" required>
                        @error('file')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <button type="submit" class="btn btn-primary w-100" id="btnImportDosen">
                        <i class="bi bi-upload me-1"></i>Import Dosen
                    </button>
                </form>

                <div class="mt-3">
                    <small class="text-muted">
                        <i class="bi bi-info-circle me-1"></i>
                        Data yang sudah ada akan di-update berdasarkan NIDK/NIM.
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    {{-- Mata Kuliah --}}
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-book me-2"></i>Import Mata Kuliah</h5>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <a href="{{ route('admin.import.template.matakuliah') }}" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-download me-1"></i>Download Template
                    </a>
                    <span class="badge bg-info">{{ App\Models\Matakuliah::count() }} data</span>
                </div>

                <form action="{{ route('admin.import.matakuliah') }}" method="POST" enctype="multipart/form-data" id="importFormMatakuliah">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Pilih File Excel</label>
                        <input type="file" name="file" class="form-control @error('file') is-invalid @enderror" accept=".xlsx,.xls" required>
                        @error('file')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <button type="submit" class="btn btn-primary w-100" id="btnImportMatakuliah">
                        <i class="bi bi-upload me-1"></i>Import Mata Kuliah
                    </button>
                </form>

                <div class="mt-3">
                    <small class="text-muted">
                        <i class="bi bi-info-circle me-1"></i>
                        Pastikan kode prodi dan NIDK dosen sudah ada di database.
                    </small>
                </div>
            </div>
        </div>
    </div>

    {{-- Info --}}
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="bi bi-question-circle me-2"></i>Petunjuk Import</h5>
            </div>
            <div class="card-body">
                <ol class="mb-0">
                    <li class="mb-2">Download template Excel yang tersedia</li>
                    <li class="mb-2">Isi data sesuai dengan format yang ada di template</li>
                    <li class="mb-2">Kolom dengan tanda <span class="text-danger">*</span> adalah wajib diisi</li>
                    <li class="mb-2">Untuk import update, isi NIM/NIDK/Kode yang sudah ada</li>
                    <li class="mb-2">Data baru akan dibuatkan otomatis jika belum ada</li>
                    <li>Akun password default untuk user baru: <code>password123</code></li>
                </ol>
            </div>
        </div>
    </div>
</div>

{{-- Import Jobs History --}}
@if(isset($recentJobs) && $recentJobs->count() > 0)
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-clock-history me-2"></i>Riwayat Import</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Tanggal</th>
                                <th>Tipe</th>
                                <th>File</th>
                                <th>Status</th>
                                <th>Progress</th>
                                <th>Hasil</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentJobs as $job)
                            <tr id="job-row-{{ $job->id }}">
                                <td>{{ $job->created_at->format('d/m/Y H:i') }}</td>
                                <td>
                                    @switch($job->type)
                                        @case('mahasiswa') <span class="badge bg-primary">Mahasiswa</span> @break
                                        @case('dosen') <span class="badge bg-success">Dosen</span> @break
                                        @case('matakuliah') <span class="badge bg-warning text-dark">Mata Kuliah</span> @break
                                        @default <span class="badge bg-secondary">{{ $job->type }}</span>
                                    @endswitch
                                </td>
                                <td class="text-truncate" style="max-width: 150px;" title="{{ $job->filename }}">{{ $job->filename }}</td>
                                <td>
                                    @switch($job->status)
                                        @case('pending')
                                            <span class="badge bg-secondary">
                                                <i class="bi bi-clock me-1"></i>Menunggu
                                            </span>
                                        @break
                                        @case('processing')
                                            <span class="badge bg-primary">
                                                <i class="bi bi-hourglass-split me-1"></i>Memproses
                                            </span>
                                        @break
                                        @case('completed')
                                            <span class="badge bg-success">
                                                <i class="bi bi-check-circle me-1"></i>Selesai
                                            </span>
                                        @break
                                        @case('failed')
                                            <span class="badge bg-danger">
                                                <i class="bi bi-x-circle me-1"></i>Gagal
                                            </span>
                                        @break
                                        @default
                                            <span class="badge bg-secondary">{{ $job->status }}</span>
                                    @endswitch
                                </td>
                                <td style="min-width: 120px;">
                                    @if($job->status === 'processing' || $job->status === 'pending')
                                        <div class="progress" style="height: 20px;">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated"
                                                 role="progressbar"
                                                 style="width: {{ $job->progress_percent }}%"
                                                 aria-valuenow="{{ $job->progress_percent }}"
                                                 aria-valuemin="0" aria-valuemax="100">
                                                {{ $job->progress_percent }}%
                                            </div>
                                        </div>
                                        <small class="text-muted">{{ $job->processed_rows }} / {{ $job->total_rows }}</small>
                                    @else
                                        <span class="text-muted">{{ $job->progress_percent }}%</span>
                                    @endif
                                </td>
                                <td>
                                    @if($job->created_rows > 0 || $job->updated_rows > 0)
                                        <span class="text-success">{{ $job->created_rows }} dibuat</span><br>
                                        <span class="text-info">{{ $job->updated_rows }} diupdate</span>
                                    @endif
                                    @if($job->error_rows > 0)
                                        <br><span class="text-danger">{{ $job->error_rows }} error</span>
                                    @endif
                                </td>
                                <td>
                                    @if($job->errors && count($job->errors) > 0)
                                        <button type="button" class="btn btn-outline-danger btn-sm" onclick="showErrors({{ $job->id }})">
                                            <i class="bi bi-exclamation-triangle"></i>
                                        </button>
                                    @endif
                                    <form action="{{ route('admin.import.jobs.delete', $job) }}" method="POST" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-outline-secondary btn-sm" onclick="return confirm('Hapus riwayat ini?')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

{{-- Import Errors from session --}}
@if(session('import_errors'))
    <div class="row mt-4">
        <div class="col-12">
            <div class="card border-danger">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0"><i class="bi bi-exclamation-triangle me-2"></i>Error saat Import</h5>
                </div>
                <div class="card-body">
                    <ul class="mb-0 text-danger">
                        @foreach(session('import_errors') as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endif

{{-- Error Modal --}}
<div class="modal fade" id="errorModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="bi bi-exclamation-triangle me-2"></i>Detail Error Import</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <ul id="errorList" class="text-danger mb-0"></ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
let pollInterval = null;
const currentJobId = {{ session('import_job_id') ? session('import_job_id') : ($activeJob ? $activeJob->id : 'null') }};

function updateProgress(jobData) {
    const progressBar = document.getElementById('importProgressBar');
    const statusText = document.getElementById('importStatusText');
    const processed = document.getElementById('importProcessed');
    const stats = document.getElementById('importStats');

    if (progressBar) {
        progressBar.style.width = jobData.progress + '%';
        progressBar.textContent = jobData.progress + '%';
        progressBar.setAttribute('aria-valuenow', jobData.progress);
    }

    if (statusText) {
        switch(jobData.status) {
            case 'pending':
                statusText.textContent = 'Menunggu dalam antrian...';
                break;
            case 'processing':
                statusText.textContent = 'Memproses data...';
                break;
            case 'completed':
                statusText.textContent = 'Selesai! ' + (jobData.result_message || '');
                statusText.className = 'text-success';
                stopPolling();
                setTimeout(() => location.reload(), 2000);
                break;
            case 'failed':
                statusText.textContent = 'Gagal: ' + (jobData.result_message || 'Terjadi kesalahan');
                statusText.className = 'text-danger';
                stopPolling();
                break;
        }
    }

    if (processed) {
        processed.textContent = jobData.processed_rows + ' / ' + jobData.total_rows + ' baris';
    }

    if (stats && (jobData.created_rows > 0 || jobData.updated_rows > 0)) {
        stats.textContent = jobData.created_rows + ' dibuat, ' + jobData.updated_rows + ' diupdate';
    }
}

function fetchProgress() {
    if (!currentJobId) {
        stopPolling();
        return;
    }

    fetch('{{ url('admin/import/progress') }}/' + currentJobId)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                console.error(data.error);
                stopPolling();
                return;
            }
            updateProgress(data);

            // Stop polling if job is done
            if (data.status === 'completed' || data.status === 'failed') {
                stopPolling();
            }
        })
        .catch(error => {
            console.error('Error fetching progress:', error);
        });
}

function startPolling() {
    if (pollInterval) return;
    fetchProgress(); // Initial fetch
    pollInterval = setInterval(fetchProgress, 1000); // Poll every second
}

function stopPolling() {
    if (pollInterval) {
        clearInterval(pollInterval);
        pollInterval = null;
    }
}

function showErrors(jobId) {
    const job = {!! json_encode($recentJobs ? $recentJobs->toArray() : []) !!}.find(j => j.id === jobId);
    if (job && job.errors) {
        const errorList = document.getElementById('errorList');
        errorList.innerHTML = job.errors.map(e => '<li>' + e + '</li>').join('');
        new bootstrap.Modal(document.getElementById('errorModal')).show();
    }
}

// Start polling if there's an active job
if (currentJobId) {
    startPolling();
}

// Refresh jobs table periodically when there's processing job
@if(isset($recentJobs) && $recentJobs->whereIn('status', ['pending', 'processing'])->count() > 0)
setInterval(() => {
    fetch('{{ route('admin.import.progress.list') }}')
        .then(response => response.json())
        .then(data => {
            // Update job rows in table if needed
            data.jobs.forEach(job => {
                const row = document.getElementById('job-row-' + job.id);
                if (row) {
                    const progressBar = row.querySelector('.progress-bar');
                    if (progressBar) {
                        progressBar.style.width = job.progress + '%';
                        progressBar.textContent = job.progress + '%';
                    }
                }
            });
        })
        .catch(console.error);
}, 3000);
@endif
</script>
@endpush