@extends('layout')

@section('title', 'Search by No Ajuan')

@section('content')
<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-search"></i> Cari Data Berdasarkan No Ajuan (No Aju)
                    </h5>
                </div>
                
                <div class="card-body">
                    <!-- Form Pencarian -->
                    <form method="POST" action="{{ route('hscode.search.by.aju') }}">
                        @csrf
                        
                        <div class="form-group">
                            <label for="no_aju" class="font-weight-bold">
                                <i class="fas fa-file-alt"></i> No Ajuan (No Aju)
                            </label>
                            <div class="input-group">
                                <input type="text" 
                                       class="form-control form-control-lg @error('no_aju') is-invalid @enderror" 
                                       id="no_aju" 
                                       name="no_aju" 
                                       value="{{ old('no_aju', $no_aju ?? '') }}" 
                                       placeholder="Contoh: 12341, 12342, ..."
                                       autofocus
                                       required>
                                <div class="input-group-append">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="fas fa-search"></i> Cari
                                    </button>
                                </div>
                            </div>
                            <small class="form-text text-muted">
                                Masukkan No Ajuan lengkap untuk melihat detail data
                            </small>
                            
                            @error('no_aju')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </form>
                    
                    <!-- Hasil Pencarian -->
                    @isset($results)
                        <hr class="my-4">
                        
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <h5 class="mb-0">
                                    <i class="fas fa-list-alt"></i> Hasil Pencarian: No Aju <strong>"{{ $no_aju }}"</strong>
                                </h5>
                                <p class="text-muted mb-0">
                                    Total ditemukan: <strong>{{ $results->total() }}</strong> data
                                </p>
                            </div>
                            
                            {{-- @if($results->total() > 0)
                            <div class="d-flex align-items-center">
                                <span class="mr-2">Urutkan:</span>
                                <div class="btn-group" role="group">
                                    <a href="{{ request()->fullUrlWithQuery(['sort' => 'tgl_pib', 'order' => $sort == 'tgl_pib' && $order == 'desc' ? 'asc' : 'desc']) }}" 
                                       class="btn btn-sm {{ $sort == 'tgl_pib' ? 'btn-primary' : 'btn-outline-primary' }}">
                                        Tanggal
                                        @if($sort == 'tgl_pib')
                                            <i class="fas fa-sort-{{ $order == 'asc' ? 'up' : 'down' }}"></i>
                                        @endif
                                    </a>
                                    <a href="{{ request()->fullUrlWithQuery(['sort' => 'cif', 'order' => $sort == 'cif' && $order == 'desc' ? 'asc' : 'desc']) }}" 
                                       class="btn btn-sm {{ $sort == 'cif' ? 'btn-primary' : 'btn-outline-primary' }}">
                                        CIF
                                        @if($sort == 'cif')
                                            <i class="fas fa-sort-{{ $order == 'asc' ? 'up' : 'down' }}"></i>
                                        @endif
                                    </a>
                                    <a href="{{ request()->fullUrlWithQuery(['sort' => 'bmtpby', 'order' => $sort == 'bmtpby' && $order == 'desc' ? 'asc' : 'desc']) }}" 
                                       class="btn btn-sm {{ $sort == 'bmtpby' ? 'btn-primary' : 'btn-outline-primary' }}">
                                        BMTP
                                        @if($sort == 'bmtpby')
                                            <i class="fas fa-sort-{{ $order == 'asc' ? 'up' : 'down' }}"></i>
                                        @endif
                                    </a>
                                </div>
                            </div>
                            @endif --}}
                        </div>
                        
                        @if($results->total() > 0)
                            <!-- Ringkasan -->
                            <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 Harga</h6>
                                            <h4 class="text-primary">$ {{ number_format($summary['total_cif'] ?? 0, 2) }}</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 Bayar</h6>
                                            <h4 class="text-success">Rp {{ number_format($summary['total_bayar'] ?? 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">Total Denda</h6>
                                            <h4 class="text-warning">Rp {{ number_format($summary['total_denda'] ?? 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">Total Bayar</h6>
                                            <h4 class="text-info">Rp {{ number_format($summary['total_bayar'] ?? 0, 0, ',', '.') }}</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Tabel Hasil -->
                            <div class="table-responsive mt-3">
                                <table class="table table-bordered table-hover table-striped">
                                    <thead class="thead-dark">
                                        <tr>
                                            <th width="5%">#</th>
                                            <th width="10%">No Ajuan</th>
                                            <th width="10%">No PIB</th>
                                            <th width="10%">Tanggal PIB</th>
                                            <th width="20%">Nama Importir</th>
                                            <th width="13%">HS Code</th>
                                            <th width="15%">Nama Barang</th>
                                            <th width="10%" class="text-right">Bayar</th>
                                            <th width="10%" class="text-right">Harga (USD)</th>
                                            <th width="10%" class="text-right">Denda</th>
                                            <th width="5%">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($results as $index => $result)
                                        @php
                                            $bayar = $result->bmby + $result->bmtpby + $result->bmadby + $result->pphby + $result->ppnby;
                                            $denda = $result->denda_per_pib + $result->kurang_bmby_per_pib + $result->kurang_pphby_per_pib + $result->kurang_ppnby_per_pib;
                                            $cif_idr = $result->cif * 16000;
                                        @endphp
                                        <tr>
                                            <td>{{ ($results->currentPage() - 1) * $results->perPage() + $index + 1 }}</td>
                                            <td><strong>{{ $result->no_aju ?? '-' }}</strong></td>
                                            <td><strong>{{ $result->no_pib ?? '-' }}</strong></td>
                                            <td>
                                                @if($result->tgl_pib)
                                                    {{ date('d-m-Y', strtotime($result->tgl_pib)) }}
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            <td>
                                                <div class="font-weight-bold">{{ $result->nm_imp ?? '-' }}</div>
                                                @if($result->nm_ppjk)
                                                    <small class="text-muted">PPJK: {{ $result->nm_ppjk }}</small>
                                                @endif
                                            </td>
                                            <td>
                                                <code class="font-weight-bold">{{ $result->hs_code }}</code>
                                                @if($result->type)
                                                    <br><small class="text-muted">Type: {{ $result->type }}</small>
                                                @endif
                                            </td>
                                            <td>
                                                <div class="font-weight-bold">{{ $result->ur_brg }}</div>
                                                @if($result->kd_sat_hrg)
                                                    <small class="text-muted">Satuan: {{ $result->kd_sat_hrg }}</small>
                                                @endif
                                            </td>
                                            <td class="text-right font-weight-bold text-success">
                                                Rp {{ number_format($bayar, 0, ',', '.') }}
                                            </td>
                                            <td class="text-right font-weight-bold">
                                                $ {{ number_format($result->cif, 2) }}<br>
                                                <small class="text-muted">≈ Rp {{ number_format($cif_idr, 0, ',', '.') }}</small>
                                            </td>
                                            <td class="text-right font-weight-bold text-danger">
                                                Rp {{ number_format($denda, 0, ',', '.') }}
                                            </td>
                                            <td class="text-center">
                                                <button class="btn btn-sm btn-info" 
                                                        onclick="showFullDetails({{ $result->id }})"
                                                        title="Lihat Detail Lengkap">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr class="table-dark">
                                            <td colspan="6" class="text-right font-weight-bold">TOTAL:</td>
                                            <td class="text-right font-weight-bold">Rp {{ number_format($summary['total_bayar'] ?? 0, 0, ',', '.') }}</td>
                                            <td class="text-right font-weight-bold">$ {{ number_format($summary['total_cif'] ?? 0, 2) }}</td>
                                            <td class="text-right font-weight-bold">Rp {{ number_format($summary['total_denda'] ?? 0, 0, ',', '.') }}</td>
                                            <td></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            
                            <!-- Pagination untuk search_by_aju.blade.php -->
                            @if($results->hasPages())
                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <div>
                                    <p class="mb-0 text-muted small">
                                        Menampilkan {{ $results->firstItem() }} - {{ $results->lastItem() }} dari {{ $results->total() }} data
                                    </p>
                                </div>
                                <div>
                                    {{ $results->appends([
                                        'no_aju' => $no_aju,
                                        'sort' => $sort, 
                                        'order' => $order
                                    ])->onEachSide(1)->links('pagination::bootstrap-4') }}
                                </div>
                            </div>

                            <style>
                            /* Override pagination size */
                            .pagination {
                                font-size: 0.8rem;
                                margin-bottom: 0;
                            }

                            .pagination .page-link {
                                padding: 0.25rem 0.5rem;
                            }

                            .pagination .page-item:first-child .page-link,
                            .pagination .page-item:last-child .page-link {
                                padding: 0.25rem 0.5rem;
                                font-size: 0.75rem;
                            }

                            .pagination .page-item.disabled .page-link {
                                color: #6c757d;
                                background-color: #f8f9fa;
                                border-color: #dee2e6;
                            }
                            </style>
                            @endif
                            
                            <!-- Tombol Export -->
                            <div class="mt-4">
                                <a href="{{ route('hscode.export.by.aju', ['no_aju' => $no_aju]) }}" 
                                   class="btn btn-success">
                                    <i class="fas fa-file-excel"></i> Export ke Excel
                                </a>
                                
                                {{-- <button class="btn btn-primary" onclick="window.print()">
                                    <i class="fas fa-print"></i> Cetak Laporan
                                </button> --}}
                            </div>
                        @else
                            <div class="alert alert-warning">
                                <i class="fas fa-exclamation-triangle"></i>
                                Tidak ditemukan data dengan No Ajuan "{{ $no_aju }}".
                                <br>
                                <small class="text-muted">Pastikan No Ajuan yang dimasukkan benar atau coba No Ajuan lainnya.</small>
                            </div>
                        @endif
                    @endisset
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal untuk Detail Lengkap -->
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detail Lengkap Data</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="detailContent">Memuat data...</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</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>
    // Auto focus on input
    $(document).ready(function() {
        $('#no_aju').focus();
        
        // Auto-uppercase no aju
        $('#no_aju').on('input', function() {
            this.value = this.value.toUpperCase();
        });
    });
    
    function showFullDetails(id) {
        $('#detailContent').html('<div class="text-center"><div class="spinner-border"></div><p>Memuat data...</p></div>');
        $('#detailModal').modal('show');
        
        // Fetch data via AJAX
        fetch(`/api/hscode/${id}/full-details`)
            .then(response => response.json())
            .then(data => {
                let html = `
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <tbody>
                                <tr>
                                    <th width="30%" class="bg-light">No Ajuan</th>
                                    <td><strong>${data.no_aju || '-'}</strong></td>
                                </tr>
                                <tr>
                                    <th class="bg-light">No PIB</th>
                                    <td>${data.no_pib || '-'}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">Tanggal PIB</th>
                                    <td>${data.tgl_pib ? formatDate(data.tgl_pib) : '-'}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">Nama Importir</th>
                                    <td>${data.nm_imp || '-'}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">Nama Pemberi Jasa</th>
                                    <td>${data.nm_ppjk || '-'}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">HS Code</th>
                                    <td><code class="font-weight-bold">${data.hs_code}</code></td>
                                </tr>
                                <tr>
                                    <th class="bg-light">Nama Barang</th>
                                    <td><strong>${data.ur_brg}</strong></td>
                                </tr>
                                <tr>
                                    <th class="bg-light">Type</th>
                                    <td>${data.type || '-'}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">Satuan Harga</th>
                                    <td>${data.kd_sat_hrg || '-'}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <h6 class="mt-4 mb-3">Detail Nilai:</h6>
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-sm table-bordered">
                                <thead class="bg-light">
                                    <tr>
                                        <th>Komponen</th>
                                        <th class="text-right">Nilai (Rp)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>BMADBY</td>
                                        <td class="text-right">${formatRupiah(data.bmadby)}</td>
                                    </tr>
                                    <tr>
                                        <td>BMBY</td>
                                        <td class="text-right">${formatRupiah(data.bmby)}</td>
                                    </tr>
                                    <tr>
                                        <td>BMTPBY</td>
                                        <td class="text-right text-success">${formatRupiah(data.bmtpby)}</td>
                                    </tr>
                                    <tr>
                                        <td>PPHBY</td>
                                        <td class="text-right">${formatRupiah(data.pphby)}</td>
                                    </tr>
                                    <tr>
                                        <td>PPNBY</td>
                                        <td class="text-right">${formatRupiah(data.ppnby)}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-sm table-bordered">
                                <thead class="bg-light">
                                    <tr>
                                        <th>Komponen</th>
                                        <th class="text-right">Nilai (Rp)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>CIF (USD)</td>
                                        <td class="text-right">$${formatNumber(data.cif, 2)}<br>
                                            <small class="text-muted">≈ Rp ${formatRupiah(data.cif * 16000)}</small>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Denda Per PIB</td>
                                        <td class="text-right text-danger">${formatRupiah(data.denda_per_pib)}</td>
                                    </tr>
                                    <tr>
                                        <td>Kurang BMBY</td>
                                        <td class="text-right">${formatRupiah(data.kurang_bmby_per_pib)}</td>
                                    </tr>
                                    <tr>
                                        <td>Kurang PPHBY</td>
                                        <td class="text-right">${formatRupiah(data.kurang_pphby_per_pib)}</td>
                                    </tr>
                                    <tr>
                                        <td>Kurang PPNBY</td>
                                        <td class="text-right">${formatRupiah(data.kurang_ppnby_per_pib)}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <div class="alert alert-info">
                                <h6>Total Bayar:</h6>
                                <h4 class="mb-0">Rp ${formatRupiah(data.total_bayar)}</h4>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="alert alert-warning">
                                <h6>Total Denda:</h6>
                                <h4 class="mb-0">Rp ${formatRupiah(data.total_denda)}</h4>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-secondary mt-2">
                        <small>
                            <strong>Sumber Data:</strong> ${data.sumber_data || '-'}<br>
                            <strong>No SPTNP:</strong> ${data.no_sptnp || '-'}<br>
                            <strong>Kode SKEP Fasilitas:</strong> ${data.kd_skep_fas || '-'}<br>
                            <strong>Dibuat pada:</strong> ${formatDateTime(data.created_at)}<br>
                            <strong>Diupdate pada:</strong> ${formatDateTime(data.updated_at)}
                        </small>
                    </div>`;
                
                $('#detailContent').html(html);
            })
            .catch(error => {
                $('#detailContent').html('<div class="alert alert-danger">Gagal memuat data. Silakan coba lagi.</div>');
            });
    }
    
    function formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString('id-ID', {
            day: '2-digit',
            month: 'long',
            year: 'numeric'
        });
    }
    
    function formatDateTime(dateTimeString) {
        const date = new Date(dateTimeString);
        return date.toLocaleDateString('id-ID', {
            day: '2-digit',
            month: 'long',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    }
    
    function formatRupiah(value) {
        return new Intl.NumberFormat('id-ID').format(value || 0);
    }
    
    function formatNumber(value, decimals = 0) {
        return new Intl.NumberFormat('en-US', {
            minimumFractionDigits: decimals,
            maximumFractionDigits: decimals
        }).format(value || 0);
    }
</script>

<!-- Tambahkan untuk pagination styling -->
<style>
    .pagination .page-item.active .page-link {
        background-color: #007bff;
        border-color: #007bff;
    }
    
    .pagination .page-link {
        color: #007bff;
    }
    
    @media print {
        .card-header, .form-group, .btn, .pagination, .alert {
            display: none !important;
        }
        
        .card {
            border: none !important;
        }
        
        h5 {
            color: #000 !important;
        }
        
        table {
            font-size: 12px !important;
        }
        
        .table-dark {
            background-color: #000 !important;
            color: #fff !important;
        }
    }
</style>
@endsection