@extends('layout')

@section('title','Upload file')

@section('content')
@if(config('app.debug'))
<div class="mt-4">
    <h6><i class="fas fa-bug"></i> Debug Info</h6>
    <pre class="bg-light p-3 small">
PHP Version: {{ phpversion() }}
Laravel Version: {{ app()->version() }}
Max Upload Size: {{ ini_get('upload_max_filesize') }}
Post Max Size: {{ ini_get('post_max_size') }}
Memory Limit: {{ ini_get('memory_limit') }}
    </pre>
</div>
@endif
<div class="content">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-upload"></i> Upload Data HS Code Baru
                    </h5>
                </div>
                
                <div class="card-body">
                    <!-- Statistik Upload -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="card-title">Total Upload</h6>
                                    <h4 class="text-primary">{{ number_format($stats['total_uploads'] ?? 0) }}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="card-title">Data Terimport</h6>
                                    <h4 class="text-success">{{ number_format($stats['total_imported'] ?? 0) }}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="card-title">Data Diupdate</h6>
                                    <h4 class="text-warning">{{ number_format($stats['total_updated'] ?? 0) }}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="card-title">7 Hari Terakhir</h6>
                                    <h4 class="text-info">{{ number_format($stats['recent_uploads'] ?? 0) }}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Form Upload -->
                    <div class="alert alert-info">
                        <h6><i class="fas fa-info-circle"></i> Petunjuk Upload:</h6>
                        <ol class="mb-0">
                            <li><strong>Format file yang didukung:</strong> CSV, XLS, XLSX</li>
                            <li><strong>Untuk CSV:</strong> Gunakan delimiter titik koma (;)</li>
                            <li><strong>Untuk Excel:</strong> Pastikan format sesuai template</li>
                            <li><strong>Kolom wajib:</strong> No Aju, Ur Brg, Hs Code</li>
                            <li><strong>Update data:</strong> Data dengan kombinasi No Aju + Ur Brg yang sama akan diupdate</li>
                            <li><strong>Encoding:</strong> UTF-8 (untuk Excel otomatis)</li>
                            <li><strong>Maksimal file size:</strong> 100MB</li>
                            <li><strong>Format tanggal:</strong> YYYY-MM-DD atau Month Day, Year</li>
                        </ol>
                    </div>
                    
                    <form action="{{ route('hscode.upload.process') }}" method="POST" enctype="multipart/form-data" id="uploadForm">
                        @csrf
                        
                        <div class="form-group">
                            <label for="csv_file" class="font-weight-bold">
                                <i class="fas fa-file-upload"></i> Pilih File (CSV/XLS/XLSX)
                            </label>
                            <div class="custom-file">
                                <input type="file" 
                                       class="custom-file-input @error('csv_file') is-invalid @enderror" 
                                       id="csv_file" 
                                       name="csv_file"
                                       accept=".csv,.xls,.xlsx,.txt"
                                       required>
                                <label class="custom-file-label" for="csv_file" id="fileLabel">
                                    Pilih file...
                                </label>
                                
                                @error('csv_file')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <small class="form-text text-muted">
                                Format: CSV (delimiter ;) atau Excel (XLS/XLSX)
                            </small>
                        </div>
                        
                        <div class="form-group">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="upsert_data" checked disabled>
                                <label class="form-check-label" for="upsert_data">
                                    <i class="fas fa-sync-alt"></i> Update data jika No Aju dan Ur Brg sudah ada
                                </label>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            <div>
                                <button type="submit" class="btn btn-primary" id="uploadBtn">
                                    <i class="fas fa-upload"></i> Upload dan Proses
                                </button>
                                
                                <div class="btn-group">
                                    <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown">
                                        <i class="fas fa-download"></i> Download Template
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="{{ route('hscode.upload.template', ['type' => 'csv']) }}">
                                            <i class="fas fa-file-csv"></i> Template CSV
                                        </a>
                                        <a class="dropdown-item" href="{{ route('hscode.upload.template', ['type' => 'excel']) }}">
                                            <i class="fas fa-file-excel"></i> Template Excel
                                        </a>
                                    </div>
                                </div>
                                
                                <button type="button" class="btn btn-outline-info" onclick="showFormatInfo()">
                                    <i class="fas fa-question-circle"></i> Format File
                                </button>
                            </div>
                            
                            <a href="{{ route('hscode.upload.history') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-history"></i> Lihat Riwayat
                            </a>
                        </div>
                    </form>
                    
                    <!-- Loading Indicator -->
                    <div id="loadingIndicator" class="text-center mt-4" style="display: none;">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Memproses...</span>
                        </div>
                        <p class="mt-2">Memproses file, harap tunggu...</p>
                        <div class="progress" style="height: 10px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                 style="width: 100%"></div>
                        </div>
                        <small class="text-muted">
                            Proses mungkin memakan waktu beberapa menit untuk file besar
                        </small>
                    </div>
                    
                    <!-- Format Info Modal -->
                    <div id="formatInfo" class="alert alert-secondary mt-3" style="display: none;">
                        <h6><i class="fas fa-file-alt"></i> Detail Format File:</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <strong>CSV Format:</strong>
                                <ul>
                                    <li>Delimiter: Titik koma (;)</li>
                                    <li>Text Qualifier: Double quotes (")</li>
                                    <li>Encoding: UTF-8</li>
                                    <li>Header: Baris pertama</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <strong>Excel Format:</strong>
                                <ul>
                                    <li>Versi: XLS atau XLSX</li>
                                    <li>Sheet: Hanya sheet pertama</li>
                                    <li>Header: Baris pertama</li>
                                    <li>Tanggal: Format ISO (YYYY-MM-DD)</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Recent Uploads -->
                    @if($recentUploads->count() > 0)
                    <hr class="my-4">
                    <h5><i class="fas fa-history"></i> Upload Terakhir</h5>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>File</th>
                                    <th>Tanggal</th>
                                    <th>Format</th>
                                    <th>Import</th>
                                    <th>Update</th>
                                    <th>Skip</th>
                                    <th>Status</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recentUploads as $upload)
                                <tr>
                                    <td>
                                        <small class="text-truncate d-block" style="max-width: 200px;">
                                            <i class="fas fa-file-{{ pathinfo($upload->original_name, PATHINFO_EXTENSION) == 'csv' ? 'csv' : 'excel' }}"></i>
                                            {{ $upload->original_name }}
                                        </small>
                                    </td>
                                    <td>{{ $upload->created_at->format('d/m/Y H:i') }}</td>
                                    <td>
                                        <span class="badge badge-info">
                                            {{ strtoupper(pathinfo($upload->original_name, PATHINFO_EXTENSION)) }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge badge-success">{{ $upload->imported_rows }}</span>
                                    </td>
                                    <td>
                                        <span class="badge badge-warning">{{ $upload->updated_rows ?? 0 }}</span>
                                    </td>
                                    <td>
                                        <span class="badge badge-danger">{{ $upload->skipped_rows }}</span>
                                    </td>
                                    <td>
                                        @php
                                            $successRate = 0;
                                            if ($upload->total_rows > 0) {
                                                $successRows = ($upload->imported_rows + ($upload->updated_rows ?? 0));
                                                $successRate = round(($successRows / $upload->total_rows) * 100, 2);
                                            }
                                            $badgeClass = $successRate >= 90 ? 'badge-success' : 
                                                         ($successRate >= 50 ? 'badge-warning' : 'badge-danger');
                                        @endphp
                                        <span class="badge {{ $badgeClass }}">
                                            {{ $successRate }}%
                                        </span>
                                    </td>
                                    <td>
                                        <a href="{{ route('hscode.upload.result', $upload->id) }}" 
                                           class="btn btn-sm btn-info" title="Lihat Detail">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/validation/validate.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.date.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.time.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/legacy.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>

<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/form_checkboxes_radios.js')}}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // File input label update
        $('#csv_file').on('change', function(e) {
            var fileName = e.target.files[0]?.name || 'Pilih file...';
            $('#fileLabel').text(fileName);
            
            // Validasi ukuran file
            var fileSize = e.target.files[0]?.size || 0;
            var maxSize = 100 * 1024 * 1024; // 100MB
            
            if (fileSize > maxSize) {
                new PNotify({
                    title: 'Error',
                    text: 'File terlalu besar. Maksimal 100MB.',
                    icon: 'icon-blocked',
                    type: 'error'
                });
                $(this).val('');
                $('#fileLabel').text('Pilih file...');
            }
            
            // Validasi ekstensi
            var extension = fileName.split('.').pop().toLowerCase();
            var allowedExtensions = ['csv', 'xls', 'xlsx', 'txt'];
            if (!allowedExtensions.includes(extension)) {
                new PNotify({
                    title: 'Error',
                    text: 'Format file tidak didukung. Gunakan CSV, XLS, atau XLSX.',
                    icon: 'icon-blocked',
                    type: 'error'
                });
                $(this).val('');
                $('#fileLabel').text('Pilih file...');
            }
        });
        
        // Form submission with loading indicator
        $('#uploadForm').on('submit', function(e) {
            $('#uploadBtn').prop('disabled', true);
            $('#loadingIndicator').show();
        });
        
        // Show notifications
        @if(session('error'))
            new PNotify({
                title: 'Error',
                text: '{{ session('error') }}',
                icon: 'icon-blocked',
                type: 'error',
                delay: 5000
            });
        @endif
        
        @if(session('success'))
            new PNotify({
                title: 'Success',
                text: '{{ session('success') }}',
                icon: 'icon-checkmark3',
                type: 'success',
                delay: 5000
            });
        @endif
        
        @if($errors->any())
            @foreach($errors->all() as $error)
                new PNotify({
                    title: 'Error',
                    text: '{{ $error }}',
                    icon: 'icon-blocked',
                    type: 'error',
                    delay: 5000
                });
            @endforeach
        @endif
    });
    
    function showFormatInfo() {
        $('#formatInfo').toggle();
    }
</script>
@endsection