@extends('layout')

@section('title','Upload history')
<!-- resources/views/hscode/upload-history.blade.php -->

@section('content')
{{-- <div class="container-fluid"> --}}
<div class="content">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-history"></i> Riwayat Upload Data HS Code
                        </h5>
                        <a href="{{ route('hscode.upload') }}" class="btn btn-light">
                            <i class="fas fa-upload"></i> Upload Baru
                        </a>
                    </div>
                </div>
                
                <div class="card-body">
                    <!-- Filters -->
                    <div class="row mb-4">
                        <div class="col-md-12">
                            <form method="GET" action="{{ route('hscode.upload.history') }}" class="form-inline">
                                <div class="form-group mr-3">
                                    <label for="start_date" class="mr-2">Dari:</label>
                                    <input type="date" class="form-control" id="start_date" name="start_date" 
                                           value="{{ request('start_date') }}">
                                </div>
                                <div class="form-group mr-3">
                                    <label for="end_date" class="mr-2">Sampai:</label>
                                    <input type="date" class="form-control" id="end_date" name="end_date" 
                                           value="{{ request('end_date') }}">
                                </div>
                                <div class="form-group mr-3">
                                    <label for="user_id" class="mr-2">User:</label>
                                    <select class="form-control" id="user_id" name="user_id">
                                        <option value="">Semua</option>
                                        @foreach($uploads->pluck('user')->unique()->filter() as $user)
                                        <option value="{{ $user->id }}" 
                                                {{ request('user_id') == $user->id ? 'selected' : '' }}>
                                            {{ $user->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-primary mr-2">
                                    <i class="fas fa-filter"></i> Filter
                                </button>
                                <a href="{{ route('hscode.upload.history') }}" class="btn btn-secondary">
                                    <i class="fas fa-redo"></i> Reset
                                </a>
                            </form>
                        </div>
                    </div>
                    
                    <!-- Stats -->
                    <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($uploads->total()) }}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="card-title">Total Data Import</h6>
                                    <h4 class="text-success">{{ number_format($uploads->sum('imported_rows')) }}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="card-title">Duplikat Dihindari</h6>
                                    <h4 class="text-warning">{{ number_format($uploads->sum('duplicate_rows')) }}</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="card-title">Rata-rata Sukses</h6>
                                    <h4 class="text-info">
                                        {{ $uploads->count() > 0 ? 
                                           number_format($uploads->avg('success_rate'), 1) : 0 }}%
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Upload History Table -->
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="thead-dark">
                                <tr>
                                    <th>#</th>
                                    <th>File</th>
                                    <th>Tanggal</th>
                                    <th>User</th>
                                    <th class="text-center">Import</th>
                                    <th class="text-center">Duplikat</th>
                                    <th class="text-center">Skipped</th>
                                    <th class="text-center">Sukses</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($uploads as $upload)
                                <tr>
                                    <td>{{ $loop->iteration + ($uploads->currentPage() - 1) * $uploads->perPage() }}</td>
                                    <td>
                                        <div>
                                            <strong>{{ $upload->original_name }}</strong>
                                        </div>
                                        <small class="text-muted">
                                            {{ basename($upload->file_path) }}
                                        </small>
                                    </td>
                                    <td>
                                        {{ $upload->created_at->format('d/m/Y') }}<br>
                                        <small class="text-muted">
                                            {{ $upload->created_at->format('H:i:s') }}
                                        </small>
                                    </td>
                                    <td>
                                        {{ $upload->user->name ?? 'System' }}
                                    </td>
                                    <td class="text-center">
                                        <span class="badge badge-success badge-pill">
                                            {{ $upload->imported_rows }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge badge-warning badge-pill">
                                            {{ $upload->duplicate_rows }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge badge-danger badge-pill">
                                            {{ $upload->skipped_rows }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        @php
                                            $successRate = $upload->success_rate;
                                            $progressClass = $successRate >= 90 ? 'bg-success' : 
                                                            ($successRate >= 50 ? 'bg-warning' : 'bg-danger');
                                        @endphp
                                        <div class="progress" style="height: 20px; width: 100px; margin: 0 auto;">
                                            <div class="progress-bar {{ $progressClass }}" 
                                                 style="width: {{ $successRate }}%"
                                                 title="{{ $successRate }}%">
                                                {{ round($successRate, 1) }}%
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <a href="{{ route('hscode.upload.result', $upload->id) }}" 
                                               class="btn btn-info" title="Lihat Detail">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            @if(auth()->id() === $upload->user_id || auth()->user()->is_admin ?? false)
                                            <form action="{{ route('hscode.upload.delete', $upload->id) }}" 
                                                  method="POST" 
                                                  class="d-inline"
                                                  onsubmit="return confirm('Hapus record upload ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger" title="Hapus">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Pagination -->
                    <div class="d-flex justify-content-center">
                        {{ $uploads->withQueryString()->links() }}
                    </div>
                    
                    <!-- Export Option -->
                    <div class="mt-4 text-right">
                        <a href="#" class="btn btn-outline-primary" id="exportBtn">
                            <i class="fas fa-file-export"></i> Export to CSV
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
	<!-- Theme JS files -->
	<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">

        $('#submit-form').on('submit', function(e){
            var empty = false;
            $('#submit-form').find('[required]').each(function() {
                if ($(this).val() == '') {
                    empty = true;
                }
            });

            console.log(empty)
            if (empty) {
                e.preventDefault();
                $(".submitBtn").attr("disabled", false);
                return false;
            } else {
                return true;
            }
        })

		var FormValidation = function() {

		    // Validation config
		    var _componentValidation = function() {
		        if (!$().validate) {
		            console.warn('Warning - validate.min.js is not loaded.');
		            return;
		        }

		        // Initialize
		        var validator = $('.form-validate-jquery').validate({
		            ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
		            errorClass: 'validation-invalid-label',
		            //successClass: 'validation-valid-label',
		            validClass: 'validation-valid-label',
		            highlight: function(element, errorClass) {
		                $(element).removeClass(errorClass);
		            },
		            unhighlight: function(element, errorClass) {
		                $(element).removeClass(errorClass);
		            },
		            // success: function(label) {
		            //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
		            //},

		            // Different components require proper error label placement
		            errorPlacement: function(error, element) {

		                // Unstyled checkboxes, radios
		                if (element.parents().hasClass('form-check')) {
		                    error.appendTo( element.parents('.form-check').parent() );
		                }

		                // Input with icons and Select2
		                else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
		                    error.appendTo( element.parent() );
		                }

		                // Input group, styled file input
		                else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
		                    error.appendTo( element.parent().parent() );
		                }

		                // Other elements
		                else {
		                    error.insertAfter(element);
		                }
		            },
		            messages: {
		                nama: {
		                    required: 'Mohon diisi.'
		                },
		                email: {
		                    required: 'Mohon diisi.'
		                },
		                no_telp: {
		                    required: 'Mohon diisi.'
		                },
		                username: {
		                    required: 'Mohon diisi.'
		                },
		                password: {
		                    required: 'Mohon diisi.'
		                },
		                role: {
		                    required: 'Mohon diisi.'
		                },
		                cabang_id: {
		                    required: 'Mohon diisi.'
		                },
		            },
		        });

		        // Reset form
		        $('#reset').on('click', function() {
		            validator.resetForm();
		        });
		    };

		    // Return objects assigned to module
		    return {
		        init: function() {
		            _componentValidation();
		        }
		    }
		}();

		// Initialize module
		// ------------------------------

		document.addEventListener('DOMContentLoaded', function() {
		    FormValidation.init();
		});
	</script>
	<script type="text/javascript">
		$( document ).ready(function() {

			var $select = $('.form-control-select2').select2();

			// Default style
	        @if(session('error'))
	            new PNotify({
	                title: 'Error',
	                text: '{{ session('error') }}.',
	                icon: 'icon-blocked',
	                type: 'error'
	            });
            @endif
            @if ( session('success'))
	            new PNotify({
	                title: 'Success',
	                text: '{{ session('success') }}.',
	                icon: 'icon-checkmark3',
	                type: 'success'
	            });
            @endif
			@if ($errors->any())
				@foreach ($errors->all() as $error)
					new PNotify({
						title: 'Error',
						text: '{{ $error }}.',
						icon: 'icon-blocked',
						type: 'error'
					});
				@endforeach
			@endif

		});
	</script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Export to CSV
            document.getElementById('exportBtn').addEventListener('click', function(e) {
                e.preventDefault();
                
                // Build export URL with current filters
                let url = new URL('{{ route("hscode.upload.history") }}', window.location.origin);
                url.searchParams.set('export', 'csv');
                
                // Add current filter parameters
                const params = new URLSearchParams(window.location.search);
                params.forEach((value, key) => {
                    url.searchParams.set(key, value);
                });
                
                window.location.href = url.toString();
            });
        });
    </script>
@endsection