@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row mx-1">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Sync History - {{ $title_menu }}</h5>
                            <a href="{{ URL::to('rptptr') }}" class="btn btn-secondary btn-sm">
                                <i class="fas fa-circle-left me-1"></i> Kembali
                            </a>
                        </div>
                    </div>
                    <hr class="horizontal dark mt-0">

                    {{-- Display session messages (success, warning, error) --}}
                    @if(session('message'))
                        <div class="row px-4 pt-3">
                            <div class="col-12">
                                @php
                                    $alertClass = session('class', 'info');
                                    $icon = match($alertClass) {
                                        'success' => 'check-circle',
                                        'warning' => 'exclamation-triangle',
                                        'danger' => 'times-circle',
                                        default => 'info-circle'
                                    };
                                @endphp
                                <div class="alert alert-{{ $alertClass }} alert-dismissible fade show" role="alert">
                                    <i class="fas fa-{{ $icon }} me-2"></i>
                                    {{ session('message') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="row px-4 py-3">
                        <div class="col-12">
                            @if($sync_list->count() > 0)
                                <div class="table-responsive">
                                    <table class="table table-hover table-bordered">
                                        <thead>
                                            <tr class="table-cyan">
                                                <th class="text-center">ID</th>
                                                <th class="text-center">Report Type</th>
                                                <th class="text-center">Tahun</th>
                                                <th class="text-center">Status</th>
                                                <th class="text-center">Progress</th>
                                                <th class="text-center">Total Records</th>
                                                <th class="text-center">Requested By</th>
                                                <th class="text-center">Waktu</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($sync_list as $sync)
                                                <tr>
                                                    <td class="text-center">{{ $sync->id }}</td>
                                                    <td class="text-center">
                                                        @php
                                                            $reportTypeLabels = [
                                                                'ZVBILLING' => 'Billing',
                                                                'ZFFINANCE_YIELD' => 'Finance Yield',
                                                                'Z_GET_NEW_CUST' => 'Customer Master',
                                                                'Z_GET_PAYMENT' => 'Payment',
                                                                'Z_GET_ONHAND' => 'Sales On Hand'
                                                            ];
                                                        @endphp
                                                        <span class="badge bg-secondary">{{ $reportTypeLabels[$sync->report_type] ?? $sync->report_type }}</span>
                                                    </td>
                                                    <td class="text-center"><strong>{{ $sync->sync_year }}</strong></td>
                                                    <td class="text-center">
                                                        @php
                                                            $statusClass = match($sync->status) {
                                                                'completed' => 'success',
                                                                'failed' => 'danger',
                                                                'processing' => 'primary',
                                                                default => 'warning'
                                                            };
                                                        @endphp
                                                        <span class="badge bg-{{ $statusClass }} sync-status-badge" data-status="{{ $sync->status }}">
                                                            {{ strtoupper($sync->status) }}
                                                        </span>
                                                    </td>
                                            <td class="text-center">
                                                @if($sync->total_records > 0)
                                                    @php
                                                        $percent = round(($sync->processed_records / $sync->total_records) * 100, 1);
                                                    @endphp
                                                    <div class="d-flex justify-content-center">
                                                        <div class="progress" style="height: 20px; width: 200px;">
                                                            <div class="progress-bar sync-progress-bar" role="progressbar" style="width: {{ $percent }}%" data-progress="{{ $percent }}">
                                                                {{ $percent }}%
                                                            </div>
                                                        </div>
                                                    </div>
                                                @else
                                                    -
                                                @endif
                                            </td>
                                                    <td class="text-center">
                                                        <small>{{ number_format($sync->total_records) }}</small>
                                                    </td>
                                                    <td class="text-center">{{ $sync->requested_by ?? '-' }}</td>
                                                    <td class="text-center">
                                                        <small>
                                                            Created: {{ date('d-m-Y H:i', strtotime($sync->created_at)) }}<br>
                                                            @if($sync->completed_at)
                                                                Completed: {{ date('d-m-Y H:i', strtotime($sync->completed_at)) }}
                                                            @endif
                                                        </small>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                
                                {{-- Pagination --}}
                                <div class="d-flex justify-content-center mt-3">
                                    {{ $sync_list->links('pagination::bootstrap-5') }}
                                </div>
                            @else
                                <div class="alert alert-info text-center">
                                    <i class="fas fa-info-circle fa-2x mb-2"></i>
                                    <p>Belum ada history sync.</p>
                                    <a href="{{ URL::to($url_menu) }}" class="btn btn-primary">Mulai Sync</a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@push('css')
<style>
    .table-cyan {
        background-color: #00b7bd !important;
        color: white !important;
    }
    .table-cyan th {
        color: white !important;
        font-weight: 600;
        border: 1px solid #009fa3 !important;
    }
</style>
@endpush

@push('js')
<script>
    // Auto refresh interval
    let autoRefreshInterval = null;
    const REFRESH_INTERVAL = 3000; // 3 seconds
    
    $(document).ready(function() {
        // Start auto refresh if there are pending/processing syncs
        startAutoRefresh();
    });
    
    // Get current page from URL
    function getCurrentPage() {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get('page') || 1;
    }
    
    // Check if any sync has pending/processing status
    function hasActiveSync() {
        let hasActive = false;
        $('.sync-status-badge').each(function() {
            const status = $(this).data('status');
            if (status === 'pending' || status === 'processing') {
                hasActive = true;
                return false; // Break loop
            }
        });
        return hasActive;
    }
    
    // Start auto refresh
    function startAutoRefresh() {
        if (hasActiveSync()) {
            autoRefreshInterval = setInterval(function() {
                refreshSyncList();
            }, REFRESH_INTERVAL);
        }
    }
    
    // Stop auto refresh
    function stopAutoRefresh() {
        if (autoRefreshInterval) {
            clearInterval(autoRefreshInterval);
            autoRefreshInterval = null;
        }
    }
    
    // Refresh sync list data
    function refreshSyncList() {
        const currentPage = getCurrentPage();
        
        $.ajax({
            url: '{{ route("rptptr.api.status.list") }}',
            method: 'GET',
            data: { page: currentPage },
            success: function(response) {
                if (response.sync_list && response.sync_list.length > 0) {
                    updateSyncListTable(response.sync_list);
                } else {
                    // No data on this page, maybe reload to show empty state
                    if (currentPage > 1 && response.pagination && response.pagination.total === 0) {
                        // If we're on a page with no data and it's not page 1, reload page 1
                        window.location.href = '{{ route("rptptr.status") }}';
                        return;
                    }
                }
                
                // Stop auto refresh if no more active syncs
                if (!hasActiveSync()) {
                    stopAutoRefresh();
                }
            },
            error: function(xhr) {
                console.error('Error refreshing sync list:', xhr);
            }
        });
    }
    
    // Update pagination info
    function updatePaginationInfo(pagination) {
        // Update showing info
        const showingText = `Showing ${pagination.from || 0} to ${pagination.to || 0} of ${pagination.total} results`;
        if ($('.pagination-info').length === 0) {
            $('.table-responsive').after(`<div class="pagination-info text-center text-muted mt-2"><small>${showingText}</small></div>`);
        } else {
            $('.pagination-info small').text(showingText);
        }
    }
    
    // Update sync list table with new data
    function updateSyncListTable(syncList) {
        let tbodyHtml = '';
        
        syncList.forEach(function(sync) {
            const statusClass = getStatusClass(sync.status);
            const percent = sync.total_records > 0 
                ? Math.round((sync.processed_records / sync.total_records) * 100 * 10) / 10 
                : 0;
            
            let progressHtml = '-';
            if (sync.total_records > 0) {
                progressHtml = `
                    <div class="d-flex justify-content-center">
                        <div class="progress" style="height: 20px; width: 200px;">
                            <div class="progress-bar sync-progress-bar" role="progressbar" style="width: ${percent}%" data-progress="${percent}">
                                ${percent}%
                            </div>
                        </div>
                    </div>
                `;
            }
            
            const reportTypeLabels = {
                'ZVBILLING': 'Billing',
                'ZFFINANCE_YIELD': 'Finance Yield',
                'Z_GET_NEW_CUST': 'Customer Master',
                'Z_GET_PAYMENT': 'Payment',
                'Z_GET_ONHAND': 'Sales On Hand'
            };
            
            tbodyHtml += `
                <tr>
                    <td class="text-center">${sync.id}</td>
                    <td class="text-center">
                        <span class="badge bg-secondary">${reportTypeLabels[sync.report_type] || sync.report_type}</span>
                    </td>
                    <td class="text-center"><strong>${sync.sync_year}</strong></td>
                    <td class="text-center">
                        <span class="badge bg-${statusClass} sync-status-badge" data-status="${sync.status}">
                            ${sync.status.toUpperCase()}
                        </span>
                    </td>
                    <td class="text-center">${progressHtml}</td>
                    <td class="text-center">
                        <small>${numberFormat(sync.total_records)}</small>
                    </td>
                    <td class="text-center">${sync.requested_by || '-'}</td>
                    <td class="text-center">
                        <small>
                            Created: ${formatDateTime(sync.created_at)}<br>
                            ${sync.completed_at ? 'Completed: ' + formatDateTime(sync.completed_at) : ''}
                        </small>
                    </td>
                </tr>
            `;
        });
        
        $('table tbody').html(tbodyHtml);
    }
    
    // Helper function to get status class
    function getStatusClass(status) {
        switch(status) {
            case 'completed': return 'success';
            case 'failed': return 'danger';
            case 'processing': return 'primary';
            default: return 'warning';
        }
    }
    
    // Helper function to format number
    function numberFormat(num) {
        return new Intl.NumberFormat('en-US').format(num);
    }
    
    // Helper function to format datetime
    function formatDateTime(dateString) {
        if (!dateString) return '-';
        const date = new Date(dateString);
        return date.toLocaleString('en-GB', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        }).replace(',', '');
    }
</script>
@endpush
@endsection