@extends('layout')

@section('title','Search hscode')
<!-- resources/views/hscode/search.blade.php -->

@section('content')
{{-- <div class="container-fluid"> --}}
<div class="content">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-search"></i> Cari HS Code Berdasarkan Nama Barang
                    </h5>
                </div>
                
                <div class="card-body">
                    <!-- Statistik -->
                    <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 Data</h6>
                                    <h4 class="text-primary">{{ number_format($stats['total_records'] ?? 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">HS Code Unik</h6>
                                    <h4 class="text-success">{{ number_format($stats['unique_hs_codes'] ?? 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">Rata-rata Harga</h6>
                                    <h4 class="text-warning">Rp {{ number_format($stats['avg_price'] ?? 0, 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">Kisaran Harga</h6>
                                    <h6 class="text-info">
                                        Rp {{ number_format($stats['min_price'] ?? 0, 0, ',', '.') }} - 
                                        Rp {{ number_format($stats['max_price'] ?? 0, 0, ',', '.') }}
                                    </h6>
                                </div>
                            </div>
                        </div>
                        {{-- <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="card-title">Fulltext Index</h6>
                                    <h4 class="{{ $stats['fulltext_available'] ? 'text-success' : 'text-warning' }}">
                                        {{ $stats['fulltext_available'] ? 'Aktif' : 'Tidak Aktif' }}
                                    </h4>
                                    @if(!$stats['fulltext_available'])
                                        <small class="text-muted">Menggunakan LIKE search</small>
                                    @endif
                                </div>
                            </div>
                        </div> --}}
                    </div>
                    
                    <!-- Form Pencarian -->
                    <form method="POST" action="{{ route('hscode.search') }}">
                        @csrf
                        
                        <div class="form-group">
                            <label for="nama_barang" class="font-weight-bold">
                                <i class="fas fa-box"></i> Nama Barang
                            </label>
                            <div class="input-group">
                                <input type="text" 
                                       class="form-control form-control-lg @error('nama_barang') is-invalid @enderror" 
                                       id="nama_barang" 
                                       name="nama_barang" 
                                       value="{{ old('nama_barang', $input ?? '') }}" 
                                       placeholder="Contoh: Circuit board, LADIES SHOES, ELECTRIC BICYCLE..."
                                       autofocus>
                            </div>
                            <small class="form-text text-muted">
                                Masukkan nama barang lengkap atau kata kunci untuk menemukan HS Code yang sesuai
                            </small>
                            
                            @error('nama_barang')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        
                        <div class="form-group">
                            <label for="hs_code" class="font-weight-bold">
                                <i class="fas fa-box"></i> HS code
                            </label>
                            <div class="input-group">
                                <input type="text" 
                                       class="form-control form-control-lg @error('hs_code') is-invalid @enderror" 
                                       id="hs_code" 
                                       name="hs_code" 
                                       value="{{ old('hs_code', $inpuths ?? '') }}" 
                                       placeholder="Contoh: 85299053, 8513, 1090..."
                                       autofocus>
                            </div>
                            <small class="form-text text-muted">
                                Masukkan kode HS code yang diinginkan
                            </small>
                            
                            {{-- @error('nama_barang')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror --}}
                        </div>
                        
                        <div class="form-group">
                            <label for="limit" class="font-weight-bold">Jumlah Hasil</label>
                            <select class="form-control" id="limit" name="limit">
                                <option value="3">3 Hasil</option>
                                <option value="5" selected>5 Hasil</option>
                                <option value="10">10 Hasil</option>
                                <option value="20">20 Hasil</option>
                            </select>
                        </div>
                                <div class="input-group-append">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="fas fa-search"></i> Cari HS Code
                                    </button>
                                </div>
                    </form>
                    
                    <!-- Hasil Pencarian -->
                    @isset($results)
                        <hr class="my-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="mb-0">
                                <i class="fas fa-list-alt"></i> Hasil Pencarian
                            </h5>
                            <span class="badge badge-info">
                                {{ count($results) }} hasil ditemukan
                            </span>
                        </div>
                        
                        <p class="text-muted">
                            Input: <strong>"{{ $input }}"</strong>
                        </p>
                        
                        @if(count($results) > 0)
                            <div class="table-responsive mt-3">
                                <table class="table table-bordered table-hover">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th width="5%">Rank</th>
                                            <th width="12%">HS Code</th>
                                            <th width="35%">Nama Barang</th>
                                            <th width="13%">Bayar</th>
                                            <th width="13%">Denda</th>
                                            <th width="13%">Harga</th>
                                            <th width="15%">Tingkat Kemiripan</th>
                                            <th width="9%">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($results as $index => $result)
                                        @php
                                            $hsCode = $result['hs_code'];
                                            $similarityPercent = round($result['similarity'] * 100, 2);
                                            $progressBarClass = $similarityPercent > 70 ? 'bg-success' : 
                                                              ($similarityPercent > 50 ? 'bg-warning' : 'bg-danger');
                                            $bayar = $hsCode->bmby + $hsCode->bmtpby + $hsCode->bmadby + $hsCode->pphby + $hsCode->ppnby;
                                            $denda = $hsCode->denda_per_pib + $hsCode->kurang_bmby_per_pib + $hsCode->kurang_pphby_per_pib + $hsCode->kurang_ppnby_per_pib;
                                            $kurs = 16000;
                                            $harga = $hsCode->cif * $kurs;
                                        @endphp
                                        <tr class="{{ $index == 0 ? 'table-success' : '' }}">
                                            <td class="text-center">
                                                <span class="badge {{ $index == 0 ? 'badge-success' : 'badge-secondary' }}">
                                                    {{ $index + 1 }}
                                                </span>
                                            </td>
                                            <td>
                                                <code class="font-weight-bold">{{ $hsCode->hs_code }}</code>
                                                {{-- @if($hsCode->type)
                                                    <br><small class="text-muted">Type: {{ $hsCode->type }}</small>
                                                @endif --}}
                                            </td>
                                            <td>
                                                <div class="font-weight-bold">{{ $hsCode->ur_brg }}</div>
                                                {{-- @if($hsCode->kd_sat_hrg)
                                                    <small class="text-muted">Satuan: {{ $hsCode->kd_sat_hrg }}</small>
                                                @endif
                                                @if($hsCode->nm_imp)
                                                    <br><small class="text-muted">Importir: {{ $hsCode->nm_imp }}</small>
                                                @endif --}}
                                                {{-- @if($hsCode->no_pib)
                                                    <br><small class="text-muted">No PIB: {{ $hsCode->no_pib }}</small>
                                                @endif --}}
                                            </td>
                                            <td class="text-right font-weight-bold">
                                                Rp {{ number_format($bayar, 0, ',', '.') }}
                                            </td>
                                            <td class="text-right font-weight-bold">
                                                Rp {{ number_format($denda, 0, ',', '.') }}
                                            </td>
                                            <td class="text-right font-weight-bold">
                                                Rp {{ number_format($harga, 0, ',', '.') }}
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="progress flex-grow-1" style="height: 20px;">
                                                        <div class="progress-bar {{ $progressBarClass }}" 
                                                             role="progressbar" 
                                                             style="width: {{ $similarityPercent }}%"
                                                             aria-valuenow="{{ $similarityPercent }}" 
                                                             aria-valuemin="0" 
                                                             aria-valuemax="100">
                                                            {{ $similarityPercent }}%
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <button class="btn btn-sm btn-info" 
                                                        onclick="showDetails('{{ $hsCode->hs_code }}')"
                                                        title="Lihat Detail">
                                                    <i class="fas fa-info-circle"></i>
                                                </button>
                                                {{-- <button class="btn btn-sm btn-primary" 
                                                        onclick="selectHSCode('{{ $hsCode->hs_code }}', '{{ $hsCode->ur_brg }}', {{ $result['harga'] }})"
                                                        title="Pilih HS Code">
                                                    <i class="fas fa-check"></i>
                                                </button> --}}
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            
                            <!-- Info Tambahan -->
                            <div class="alert alert-info mt-3">
                                <h6><i class="fas fa-lightbulb"></i> Tips Pencarian:</h6>
                                <ul class="mb-0">
                                    <li>Gunakan nama barang yang spesifik untuk hasil lebih akurat</li>
                                    <li>Hasil dengan kemiripan >70% biasanya paling relevan</li>
                                    <li>HS Code yang sama bisa memiliki variasi harga tergantung importir dan waktu</li>
                                </ul>
                            </div>
                        @else
                            <div class="alert alert-warning">
                                <i class="fas fa-exclamation-triangle"></i>
                                Tidak ditemukan HS Code yang mirip dengan input yang diberikan.
                                Coba gunakan kata kunci yang lebih spesifik.
                            </div>
                        @endif
                    @endisset
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal untuk Detail HS Code -->
<div class="modal fade" id="hsCodeModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document" style="max-width:1400px">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">Detail HS Code: <span id="modalHsCode"></span></h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Filter Search -->
                <div class="row mb-3">
                    <div class="col-md-8">
                        <div class="input-group">
                            <input type="text" class="form-control" id="detailSearch" placeholder="Cari dalam hasil... (nama barang, importir, no pib, dll)">
                            <div class="input-group-append">
                                <button class="btn btn-primary" onclick="loadHSCodeDetails(1)">
                                    <i class="fas fa-search"></i> Cari
                                </button>
                                <button class="btn btn-secondary" onclick="resetDetailSearch()">
                                    <i class="fas fa-redo"></i> Reset
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 text-right">
                        <div class="form-inline">
                            <label for="detailPerPage" class="mr-2">Per Halaman:</label>
                            <select class="form-control form-control-sm" id="detailPerPage" onchange="loadHSCodeDetails(1)">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- Statistik -->
                <div id="hsCodeStats" class="mb-4">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="card-title">Total Data</h6>
                                    <h4 class="text-primary" id="totalRecords">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">Range Bayar</h6>
                                    <div>
                                        <small>Min:</small> <span id="minBayar" class="text-success">Rp 0</span><br>
                                        <small>Max:</small> <span id="maxBayar" class="text-success">Rp 0</span><br>
                                        <small>Avg:</small> <span id="avgBayarStat" class="text-success">Rp 0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="card-title">Range Harga</h6>
                                    <div>
                                        <small>Min:</small> <span id="minHarga" class="text-warning">Rp 0</span><br>
                                        <small>Max:</small> <span id="maxHarga" class="text-warning">Rp 0</span><br>
                                        <small>Avg:</small> <span id="avgHargaStat" class="text-warning">Rp 0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h6 class="card-title">Range Denda</h6>
                                    <div>
                                        <small>Min:</small> <span id="minDenda" class="text-danger">Rp 0</span><br>
                                        <small>Max:</small> <span id="maxDenda" class="text-danger">Rp 0</span><br>
                                        <small>Avg:</small> <span id="avgDenda" class="text-danger">Rp 0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Tabel Detail -->
                <div class="table-responsive">
                    <table class="table table-bordered table-hover table-striped">
                        <thead class="thead-dark">
                            <tr>
                                <th width="3%">#</th>
                                <th width="8%">No Aju</th>
                                <th width="8%">No PIB</th>
                                <th width="8%">Tgl PIB</th>
                                <th width="15%">Importir</th>
                                <th width="25%">Nama Barang</th>
                                <th width="5%">Type</th>
                                <th width="8%" class="text-right">Harga (USD)</th>
                                <th width="10%" class="text-right">Harga (Rp)</th>
                                <th width="10%" class="text-right">Bayar (Rp)</th>
                                <th width="10%" class="text-right">Denda (Rp)</th>
                            </tr>
                        </thead>
                        <tbody id="modalContent">
                            <!-- Data akan dimuat via AJAX -->
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <div id="hsCodePagination" class="d-flex justify-content-center mt-3">
                    <!-- Pagination akan dimuat via AJAX -->
                </div>
                
                <!-- Info Search -->
                <div id="searchInfo" class="mt-3 text-muted">
                    <!-- Info pencarian akan ditampilkan di sini -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-primary" onclick="exportHSCodeDetails()">
                    <i class="fas fa-download"></i> Export Excel
                </button>
            </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>
    // Variabel global untuk menyimpan hsCode saat ini
    var currentHsCode = '';
    var currentSearch = '';
    var currentPerPage = 10;

    function showDetails(hsCode) {
        currentHsCode = hsCode;
        $('#modalHsCode').text(hsCode);
        $('#detailSearch').val('');
        $('#detailPerPage').val('10');
        $('#hsCodeModal').modal('show');
        loadHSCodeDetails(1);
    }

    function loadHSCodeDetails(page) {
        currentSearch = $('#detailSearch').val();
        currentPerPage = $('#detailPerPage').val();
        
        $.ajax({
            url: '/api/hscode/' + currentHsCode + '/details',
            type: 'GET',
            data: {
                page: page,
                per_page: currentPerPage,
                search: currentSearch
            },
            beforeSend: function() {
                $('#modalContent').html('<tr><td colspan="11" class="text-center"><div class="spinner-border"></div> Memuat data...</td></tr>');
                $('#hsCodePagination').html('');
                $('#searchInfo').html('');
            },
            success: function(response) {
                // Update statistik
                updateStats(response.stats);
                
                // Update tabel
                renderTable(response.data);
                
                // Update pagination
                renderPagination(response.pagination, page);
                
                // Update info pencarian
                updateSearchInfo(response);
            },
            error: function(xhr) {
                $('#modalContent').html('<tr><td colspan="11" class="text-center text-danger">Gagal memuat data</td></tr>');
            }
        });
    }

    function updateStats(stats) {
        $('#totalRecords').text(formatNumber(stats.total));
        $('#minBayar').text('Rp ' + formatNumber(stats.minbayar));
        $('#maxBayar').text('Rp ' + formatNumber(stats.maxbayar));
        $('#avgBayarStat').text('Rp ' + formatNumber(Math.round(stats.avgbayar)));
        $('#minHarga').text('Rp ' + formatNumber(stats.minharga));
        $('#maxHarga').text('Rp ' + formatNumber(stats.maxharga));
        $('#avgHargaStat').text('Rp ' + formatNumber(Math.round(stats.avgharga)));
        $('#minDenda').text('Rp ' + formatNumber(stats.mindenda));
        $('#maxDenda').text('Rp ' + formatNumber(stats.maxdenda));
        $('#avgDenda').text('Rp ' + formatNumber(Math.round(stats.avgdenda)));
    }

    function renderTable(data) {
        let tbody = '';
        
        if (data.length === 0) {
            tbody = '<tr><td colspan="11" class="text-center">Tidak ada data ditemukan</td></tr>';
        } else {
            $.each(data, function(index, item) {
                tbody += `
                    <tr>
                        <td>${index + 1}</td>
                        <td><small>${item.no_aju || '-'}</small></td>
                        <td><small>${item.no_pib || '-'}</small></td>
                        <td><small>${item.tgl_pib}</small></td>
                        <td><small>${item.nm_imp || '-'}</small></td>
                        <td>
                            <div><small>${item.ur_brg || '-'}</small></div>
                            ${item.type ? '<div><small class="text-muted">Type: ' + item.type + '</small></div>' : ''}
                            ${item.kd_sat_hrg ? '<div><small class="text-muted">Satuan: ' + item.kd_sat_hrg + '</small></div>' : ''}
                        </td>
                        <td><small>${item.type || '-'}</small></td>
                        <td class="text-right">
                            <small>${item.cif_formatted}</small>
                        </td>
                        <td class="text-right">
                            <small>${item.cif_rp_formatted}</small>
                        </td>
                        <td class="text-right">
                            <small class="text-success">${item.bayar_formatted}</small>
                        </td>
                        <td class="text-right">
                            <small class="text-danger">${item.denda_formatted}</small>
                        </td>
                    </tr>
                `;
            });
        }
        
        $('#modalContent').html(tbody);
    }

    function renderPagination(pagination, currentPage) {
        let paginationHtml = '';
        
        if (pagination.last_page > 1) {
            paginationHtml = `<nav aria-label="Page navigation">
                <ul class="pagination">`;
            
            // Previous button
            if (pagination.current_page > 1) {
                paginationHtml += `<li class="page-item">
                    <a class="page-link" href="javascript:void(0)" onclick="loadHSCodeDetails(${pagination.current_page - 1})">Previous</a>
                </li>`;
            }
            
            // Page numbers
            let startPage = Math.max(1, pagination.current_page - 2);
            let endPage = Math.min(pagination.last_page, pagination.current_page + 2);
            
            for (let i = startPage; i <= endPage; i++) {
                paginationHtml += `<li class="page-item ${i == pagination.current_page ? 'active' : ''}">
                    <a class="page-link" href="javascript:void(0)" onclick="loadHSCodeDetails(${i})">${i}</a>
                </li>`;
            }
            
            // Next button
            if (pagination.current_page < pagination.last_page) {
                paginationHtml += `<li class="page-item">
                    <a class="page-link" href="javascript:void(0)" onclick="loadHSCodeDetails(${pagination.current_page + 1})">Next</a>
                </li>`;
            }
            
            paginationHtml += `</ul>
                <div class="text-center mt-2">
                    <small class="text-muted">
                        Menampilkan ${pagination.per_page} dari ${pagination.total} data (Halaman ${pagination.current_page} dari ${pagination.last_page})
                    </small>
                </div>
            </nav>`;
        } else {
            paginationHtml = `<div class="text-center">
                <small class="text-muted">Menampilkan ${pagination.total} data</small>
            </div>`;
        }
        
        $('#hsCodePagination').html(paginationHtml);
    }

    function updateSearchInfo(response) {
        let infoHtml = '';
        
        if (response.search) {
            infoHtml = `<div class="alert alert-info">
                <i class="fas fa-info-circle"></i> 
                Menampilkan hasil pencarian untuk: <strong>"${response.search}"</strong>
                (${response.stats.total} data ditemukan)
            </div>`;
        } else {
            infoHtml = `<div class="alert alert-secondary">
                <i class="fas fa-info-circle"></i> 
                Menampilkan semua data untuk HS Code: <strong>${response.hs_code}</strong>
                (${response.stats.total} total data)
            </div>`;
        }
        
        $('#searchInfo').html(infoHtml);
    }

    function resetDetailSearch() {
        $('#detailSearch').val('');
        loadHSCodeDetails(1);
    }

    function exportHSCodeDetails() {
        let searchParam = currentSearch ? '&search=' + encodeURIComponent(currentSearch) : '';
        window.location.href = '/hscode/export-hs-code/' + currentHsCode + '?per_page=' + currentPerPage + searchParam;
    }

    function formatNumber(number) {
        return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }

    // Enable enter key for search
    $(document).ready(function() {
        $('#detailSearch').keypress(function(e) {
            if (e.which == 13) {
                loadHSCodeDetails(1);
            }
        });
    });
    </script>
@endsection