@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">
                        <h5 class="mb-0">Sync Status - {{ $title_menu }}</h5>
                    </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

                    {{-- Sync Progress Card --}}
                    <div class="row px-4 py-3">
                        <div class="col-12">
                            <div class="card border shadow-sm">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h6 class="mb-0">
                                            <i class="fas fa-sync-alt me-2"></i>
                                            @php
                                                $reportTypeLabels = [
                                                    'ZVBILLING' => 'ZVBILLING - Billing Data',
                                                    'ZFFINANCE_YIELD' => 'ZFFINANCE_YIELD_ACCOUNTING',
                                                    'Z_GET_NEW_CUST' => 'Z_GET_NEW_CUST - Customer Master',
                                                    'Z_GET_PAYMENT' => 'Z_GET_PAYMENT - Payment Data',
                                                    'Z_GET_ONHAND' => 'ZFM_RF_GET_ONHAND - Sales On Hand'
                                                ];
                                            @endphp
                                            {{ $reportTypeLabels[$sync_status->report_type] ?? $sync_status->report_type }}<br>
                                            <small class="text-muted">Tahun: <strong>{{ $sync_status->sync_year }}</strong></small>
                                        </h6>
                                        <span class="badge bg-{{ $sync_status->status === 'completed' ? 'success' : ($sync_status->status === 'failed' ? 'danger' : ($sync_status->status === 'processing' ? 'primary' : 'warning')) }}">
                                            {{ strtoupper($sync_status->status) }}
                                        </span>
                                    </div>

                                    {{-- Progress Bar --}}
                                    @if($sync_status->status === 'processing' || $sync_status->status === 'completed')
                                        @php
                                            $progress = $sync_status->total_records > 0 
                                                ? round(($sync_status->processed_records / $sync_status->total_records) * 100, 1)
                                                : 0;
                                        @endphp
                                        <div class="mb-3">
                                            <div class="d-flex justify-content-between mb-1">
                                                <small>Progress</small>
                                                <small id="progress-text">{{ $progress }}% ({{ number_format($sync_status->processed_records) }} / {{ number_format($sync_status->total_records) }} records)</small>
                                            </div>
                                            <div class="progress" style="height: 25px;">
                                                <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" 
                                                     role="progressbar" 
                                                     style="width: {{ $progress }}%"
                                                     aria-valuenow="{{ $progress }}" 
                                                     aria-valuemin="0" 
                                                     aria-valuemax="100">
                                                    {{ $progress }}%
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    {{-- Stats --}}
                                    <div class="row text-center mt-4">
                                        <div class="col-12 mb-3">
                                            <div class="p-2 border rounded">
                                                <small class="text-muted">Total Records</small>
                                                <h4 class="mb-0" id="stat-total">{{ number_format($sync_status->total_records) }}</h4>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Time Info --}}
                                    <div class="row mt-3">
                                        <div class="col-md-4">
                                            <small class="text-muted">Dimulai:</small>
                                            <p class="mb-0">{{ $sync_status->started_at ? date('d-m-Y H:i:s', strtotime($sync_status->started_at)) : '-' }}</p>
                                        </div>
                                        <div class="col-md-4">
                                            <small class="text-muted">Selesai:</small>
                                            <p class="mb-0">{{ $sync_status->completed_at ? date('d-m-Y H:i:s', strtotime($sync_status->completed_at)) : '-' }}</p>
                                        </div>
                                        <div class="col-md-4">
                                            <small class="text-muted">Requested By:</small>
                                            <p class="mb-0">{{ $sync_status->requested_by ?? '-' }}</p>
                                        </div>
                                    </div>

                                    {{-- Error Message --}}
                                    @if($sync_status->error_message)
                                        <div class="alert alert-danger mt-3">
                                            <i class="fas fa-exclamation-triangle me-2"></i>
                                            <strong>Error:</strong> {{ $sync_status->error_message }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Action Buttons --}}
                    <div class="row px-4 py-2">
                        <div class="col-12">
                            <div class="d-flex gap-2">
                                <a href="{{ URL::to('rptptr') }}" class="btn btn-secondary mb-0">
                                    <i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali ke Filter</span>
                                </a>
                                
                                @if($sync_status->status === 'completed')
                                    <a href="{{ URL::to('rptptr') }}" class="btn btn-info mb-0">
                                        <i class="fas fa-eye me-1"></i><span class="font-weight-bold">View Data</span>
                                    </a>
                                @endif

                                @if($sync_status->status === 'failed')
                                    <form method="POST" action="{{ URL::to('rptptr') }}" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="year" value="{{ $sync_status->sync_year }}">
                                        <input type="hidden" name="action" value="sync">
                                        <button type="submit" class="btn btn-primary mb-0" onclick="return showSyncLoading();">
                                            <i class="fas fa-redo me-1"></i><span class="font-weight-bold">Retry Sync</span>
                                        </button>
                                    </form>
                                @endif

                                <a href="{{ route('rptptr.status') }}" class="btn btn-outline-primary mb-0">
                                    <i class="fas fa-list me-1"></i><span class="font-weight-bold">Lihat Semua Sync</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- Data Preview (if completed) --}}
                    @if($sync_status->status === 'completed' && !empty($table_result))
                        <div class="row px-4 py-3">
                            <div class="col-12">
                                <h6 class="mb-3">Data Preview ({{ count($table_result) }} records)</h6>
                                <div class="table-responsive">
                                    @if($sync_status->report_type === 'Z_GET_ONHAND')
                                        <table class="table table-sm table-hover table-bordered" id="rptptr-table">
                                            <thead>
                                                <tr class="table-cyan">
                                                    <th class="text-center" width="50px">No</th>
                                                    <th class="text-center">Document Number</th>
                                                    <th class="text-center">Customer Code</th>
                                                    <th class="text-center">Delivery Date</th>
                                                    <th class="text-center">Quantity</th>
                                                    <th class="text-center">Fiscal Year</th>
                                                    <th class="text-center">Fiscal Month</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach (array_slice($table_result, 0, 10) as $index => $row)
                                                    <tr>
                                                        <td class="text-center">{{ $index + 1 }}</td>
                                                        <td class="text-center">{{ $row->DOCUMENTNUMBER }}</td>
                                                        <td class="text-center">{{ $row->CUSTOMERCODE }}</td>
                                                        <td class="text-center">{{ $row->DELIVERYDATE ? date('d-m-Y', strtotime($row->DELIVERYDATE)) : '-' }}</td>
                                                        <td class="text-center">{{ $row->QUANTITY !== null ? number_format($row->QUANTITY, 3) : '-' }}</td>
                                                        <td class="text-center">{{ $row->FISCALYEAR }}</td>
                                                        <td class="text-center">{{ $row->FISCALMONTH }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    @else
                                        <table class="table table-sm table-hover table-bordered" id="rptptr-table">
                                            <thead>
                                                <tr class="table-cyan">
                                                    <th class="text-center" width="50px">No</th>
                                                    <th class="text-center">Billing Doc</th>
                                                    <th class="text-center">Item</th>
                                                    <th class="text-center">Billing Date</th>
                                                    <th class="text-center">Material</th>
                                                    <th class="text-center">Description</th>
                                                    <th class="text-center">Bill Qty</th>
                                                    <th class="text-center">Net Value</th>
                                                    <th class="text-center">Sold To</th>
                                                    <th class="text-center">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach (array_slice($table_result, 0, 10) as $index => $row)
                                                    <tr>
                                                        <td class="text-center">{{ $index + 1 }}</td>
                                                        <td class="text-center">{{ $row->BILLDOC }}</td>
                                                        <td class="text-center">{{ $row->ITMNO }}</td>
                                                        <td class="text-center">{{ $row->BILLDATE ? date('d-m-Y', strtotime($row->BILLDATE)) : '-' }}</td>
                                                        <td class="text-center">{{ $row->MATNR }}</td>
                                                        <td class="text-center">{{ $row->ITEMD }}</td>
                                                        <td class="text-center">{{ $row->BILLQTY ? number_format($row->BILLQTY, 4) : '-' }}</td>
                                                        <td class="text-center">{{ $row->NETVAL ? number_format($row->NETVAL, 2) : '-' }}</td>
                                                        <td class="text-center">{{ $row->SOLDTO }}</td>
                                                        <td class="text-center">
                                                            @if ($row->STATUS)
                                                                <span class="badge bg-success">{{ $row->STATUS }}</span>
                                                            @else
                                                                <span class="badge bg-secondary">-</span>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    @endif
                                </div>
                                @if(count($table_result) > 10)
                                    <p class="text-center text-muted mt-2">
                                        <em>Menampilkan 10 dari {{ count($table_result) }} records. 
                                        <a href="{{ URL::to('rptptr') }}">Lihat semua data</a></em>
                                    </p>
                                @endif
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Auto-refresh for pending/processing status --}}
@if($sync_status->status === 'pending' || $sync_status->status === 'processing')
@push('js')
<script>
    let syncId = {{ $sync_status->id }};
    let checkInterval;

    function checkStatus() {
        $.ajax({
            url: '{{ route("rptptr.api.status") }}',
            method: 'GET',
            data: { sync_id: syncId },
            success: function(response) {
                // Update progress bar
                if (response.total_records > 0) {
                    let percent = response.progress_percent;
                    $('#progress-bar').css('width', percent + '%').attr('aria-valuenow', percent).text(percent + '%');
                    $('#progress-text').text(percent + '% (' + response.processed_records.toLocaleString() + ' / ' + response.total_records.toLocaleString() + ' records)');
                }

                // Update stats
                $('#stat-total').text(response.total_records.toLocaleString());

                // If completed or failed, reload page
                if (response.status === 'completed' || response.status === 'failed') {
                    clearInterval(checkInterval);
                    location.reload();
                }
            },
            error: function() {
                console.error('Failed to check status');
            }
        });
    }

    // Check every 3 seconds
    checkInterval = setInterval(checkStatus, 3000);

    // Initial check
    checkStatus();
</script>
@endpush
@endif

@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>
    function showSyncLoading() {
        Swal.fire({
            title: 'Mengambil Data',
            html: 'Sedang mengambil data dari SAP...<br><small>Mohon tunggu</small>',
            allowOutsideClick: false,
            allowEscapeKey: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        return true;
    }
</script>
@endpush
@endsection