

<div class="border-t border-stone-200 pt-3 sm:pt-4 mt-3 sm:mt-4" id="resi-panel">
    <h4 class="text-xs sm:text-sm font-bold text-stone-800 mb-2 sm:mb-3 flex items-center">
        <i class="fas fa-barcode mr-2 text-amber-600"></i>
        Nomor Resi & Pengiriman
    </h4>

    <div class="space-y-3">

        
        <?php if($order->courier_name || $order->courier_code): ?>
        <div class="bg-stone-50 rounded-lg p-3 border border-stone-200 space-y-2 text-xs">
            <?php if($order->courier_name): ?>
            <div class="flex justify-between">
                <span class="text-stone-500">Kurir</span>
                <span class="font-semibold text-stone-800"><?php echo e($order->courier_name); ?></span>
            </div>
            <?php endif; ?>
            <?php if($order->estimated_days): ?>
            <div class="flex justify-between">
                <span class="text-stone-500">Estimasi</span>
                <span class="font-medium text-stone-700"><?php echo e($order->estimated_days); ?></span>
            </div>
            <?php endif; ?>
            <?php if($order->shipping_cost !== null): ?>
            <div class="flex justify-between">
                <span class="text-stone-500">Ongkir</span>
                <span class="font-semibold <?php echo e((int)$order->shipping_cost === 0 ? 'text-emerald-600' : 'text-stone-800'); ?>">
                    <?php echo e((int)$order->shipping_cost === 0 ? 'GRATIS' : 'Rp ' . number_format($order->shipping_cost, 0, ',', '.')); ?>

                </span>
            </div>
            <?php endif; ?>
            <?php if($order->total_weight): ?>
            <div class="flex justify-between">
                <span class="text-stone-500">Berat total</span>
                <span class="text-stone-600">
                    <?php echo e($order->total_weight >= 1000
                        ? round($order->total_weight / 1000, 2) . ' kg'
                        : $order->total_weight . ' gram'); ?>

                </span>
            </div>
            <?php endif; ?>
        </div>
        <?php endif; ?>

        
        <?php if($order->hasTrackingNumber()): ?>
        <div class="p-3 bg-amber-50 rounded-lg border border-amber-200">
            <div class="flex items-center justify-between gap-2 mb-1.5">
                <span class="text-xs font-semibold text-amber-800">Nomor Resi Aktif</span>
                <button onclick="copyResiAdmin('<?php echo e($order->tracking_number); ?>')"
                    class="text-[10px] text-amber-600 hover:text-amber-800 font-semibold flex items-center gap-1">
                    <i class="fas fa-copy text-[10px]"></i>Salin
                </button>
            </div>
            <div class="flex items-center gap-2 p-2 bg-white rounded-lg border border-amber-200">
                <i class="fas fa-barcode text-amber-400 flex-shrink-0"></i>
                <span class="font-mono text-sm font-bold text-stone-800 tracking-widest flex-1">
                    <?php echo e($order->tracking_number); ?>

                </span>
            </div>
            <?php if($order->tracking_url): ?>
            <a href="<?php echo e($order->tracking_url); ?>" target="_blank" rel="noopener noreferrer"
               class="mt-2 inline-flex items-center gap-1.5 text-xs text-blue-600 hover:text-blue-800 font-medium">
                <i class="fas fa-external-link-alt" style="font-size:10px"></i>
                Cek di website kurir
            </a>
            <?php endif; ?>
        </div>
        <?php else: ?>
        <div class="p-3 bg-stone-50 rounded-lg border border-dashed border-stone-300 text-center">
            <i class="fas fa-barcode text-stone-300 text-xl mb-1"></i>
            <p class="text-xs text-stone-400">Belum ada nomor resi</p>
        </div>
        <?php endif; ?>

        
        <?php if(!$order->isCancelled()): ?>
        <div class="space-y-2">
            <p class="text-xs font-semibold text-stone-700">
                <?php echo e($order->hasTrackingNumber() ? 'Perbarui' : 'Input'); ?> Nomor Resi
            </p>

            
            <div class="flex gap-2" id="manual-resi-form">
                <input type="text" id="manual-resi-input"
                    placeholder="<?php echo e($order->tracking_number ?? 'Contoh: JNE1234567890'); ?>"
                    class="flex-1 px-3 py-2 text-xs border border-stone-200 rounded-lg bg-stone-50
                           focus:ring-2 focus:ring-amber-500 focus:border-transparent font-mono
                           uppercase placeholder-stone-300"
                    maxlength="50"
                    oninput="this.value = this.value.toUpperCase().replace(/\s/g, '')">
                <button onclick="saveResiManual()"
                    class="flex-shrink-0 px-3 py-2 btn-primary text-xs font-semibold
                           rounded-lg transition flex items-center gap-1.5">
                    <i class="fas fa-save"></i>Simpan
                </button>
            </div>

            
            <button onclick="generateResiAuto()"
                class="w-full py-2 bg-stone-100 hover:bg-stone-200 border border-stone-200 text-stone-600
                       text-xs font-medium rounded-lg transition flex items-center justify-center gap-1.5">
                <i class="fas fa-magic text-amber-500"></i>
                Generate Nomor Resi Otomatis
            </button>

            <p class="text-[10px] text-stone-400">
                <i class="fas fa-info-circle mr-1 text-amber-400"></i>
                Setelah menyimpan resi, jangan lupa update status ke <strong>Dikirim</strong> agar
                user dapat melihat resinya.
            </p>
        </div>
        <?php endif; ?>

    </div>
</div>

</div>


<div id="resiConfirmModal" class="fixed inset-0 z-[10000] hidden items-center justify-center p-4 bg-stone-900/60 backdrop-blur-sm transition-all duration-300 opacity-0">
    <div id="resiConfirmContent" class="bg-white rounded-3xl max-w-sm w-full overflow-hidden shadow-2xl transform scale-95 transition-all duration-300">
        <div class="relative p-8 text-center">
            <!-- Decorative Background -->
            <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 bg-amber-50 rounded-full -z-10"></div>
            
            <!-- Icon -->
            <div class="w-20 h-20 bg-gradient-to-br from-amber-400 to-orange-500 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-amber-200 transform -rotate-3 hover:rotate-0 transition-transform duration-300">
                <i class="fas fa-magic text-white text-3xl"></i>
            </div>
            
            <h3 class="text-xl font-extrabold text-stone-800 mb-2">Generate Otomatis?</h3>
            <p class="text-xs text-stone-500 leading-relaxed mb-8">
                Sistem akan membuat nomor resi baru secara otomatis. <br>
                <span class="text-amber-600 font-semibold italic">*Nomor resi lama (jika ada) akan diganti.</span>
            </p>
            
            <!-- Buttons -->
            <div class="flex flex-col gap-3">
                <button onclick="confirmAutoResi()" 
                        id="confirmResiBtn"
                        class="w-full py-3.5 bg-gradient-to-r from-stone-800 to-stone-900 hover:from-stone-900 hover:to-black text-white text-sm font-bold rounded-2xl shadow-xl transition-all active:scale-95 flex items-center justify-center gap-2">
                    <i class="fas fa-bolt"></i>
                    <span>Ya, Generate Sekarang</span>
                </button>
                <button onclick="closeResiModal()" 
                        class="w-full py-3 text-stone-400 hover:text-stone-600 text-sm font-semibold transition-colors">
                    Nanti Saja
                </button>
            </div>
        </div>
    </div>
</div>


<?php if (! $__env->hasRenderedOnce('342bb05d-21bc-4492-9fd9-45aa36ee228e')): $__env->markAsRenderedOnce('342bb05d-21bc-4492-9fd9-45aa36ee228e'); ?>
<script>
const _adminOrderId = '<?php echo e($order->order_id); ?>';

function openResiModal() {
    const modal = document.getElementById('resiConfirmModal');
    const content = document.getElementById('resiConfirmContent');
    
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    
    // Trigger transition
    setTimeout(() => {
        modal.classList.add('opacity-100');
        content.classList.remove('scale-95');
        content.classList.add('scale-100');
    }, 10);
}

function closeResiModal() {
    const modal = document.getElementById('resiConfirmModal');
    const content = document.getElementById('resiConfirmContent');
    
    modal.classList.remove('opacity-100');
    content.classList.remove('scale-100');
    content.classList.add('scale-95');
    
    setTimeout(() => {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }, 300);
}

async function generateResiAuto() {
    openResiModal();
}

async function confirmAutoResi() {
    const btn = document.getElementById('confirmResiBtn');
    const originalContent = btn.innerHTML;
    
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>Membuat...</span>';
    btn.disabled = true;

    await submitResi({
        _token:        '<?php echo e(csrf_token()); ?>',
        auto_generate: 1,
    });
}

async function saveResiManual() {
    const resi        = document.getElementById('manual-resi-input').value.trim().toUpperCase();
    
    if (!resi) {
        showResiToast('Masukkan nomor resi terlebih dahulu.', 'error');
        return;
    }

    await submitResi({
        _token: '<?php echo e(csrf_token()); ?>',
        tracking_number: resi
    });
}

async function submitResi(body) {
    try {
        const res = await fetch('/admin/orders/' + _adminOrderId + '/tracking', {
            method:  'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>' },
            body:    JSON.stringify(body),
        });

        const data = await res.json();

        if (data.success) {
            closeResiModal();
            showResiToast('Berhasil! Resi Dibuat: ' + data.tracking_number, 'success');
            setTimeout(() => location.reload(), 1500);
        } else {
            showResiToast(data.message || 'Gagal menyimpan resi.', 'error');
            const btn = document.getElementById('confirmResiBtn');
            btn.innerHTML = '<i class="fas fa-bolt"></i><span>Ya, Generate Sekarang</span>';
            btn.disabled = false;
        }
    } catch (e) {
        showResiToast('Terjadi kesalahan: ' + e.message, 'error');
    }
}

function copyResiAdmin(resi) {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(resi).then(() => showResiToast('Resi disalin: ' + resi, 'info'));
    } else {
        const el = document.createElement('textarea');
        el.value = resi;
        el.style.cssText = 'position:fixed;opacity:0';
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        showResiToast('Resi disalin: ' + resi, 'info');
    }
}

function showResiToast(msg, type) {
    const colors = { 
        success: 'bg-emerald-600', 
        error: 'bg-rose-500', 
        info: 'bg-stone-800' 
    };
    const toast = document.createElement('div');
    toast.className = `fixed bottom-6 left-1/2 -translate-x-1/2 z-[100001] px-5 py-3 ${colors[type] || colors.info} text-white text-xs font-bold rounded-2xl shadow-2xl flex items-center gap-3 transition-all duration-500 transform translate-y-20`;
    toast.innerHTML = `<i class="fas ${type === 'error' ? 'fa-exclamation-circle' : 'fa-check-circle'}"></i> <span>${msg}</span>`;
    
    document.body.appendChild(toast);
    
    // Animate in
    setTimeout(() => toast.classList.remove('translate-y-20'), 10);
    
    // Animate out
    setTimeout(() => { 
        toast.classList.add('opacity-0', 'translate-y-2'); 
        setTimeout(() => toast.remove(), 500); 
    }, 3000);
}
</script>
<?php endif; ?>
<?php /**PATH C:\laragon\www\interia\resources\views/orders/admin/_resi_panel.blade.php ENDPATH**/ ?>