{{--
    Partial: resources/views/orders/_tracking_resi.blade.php

    Include di orders/show.blade.php, dalam kolom kanan (ringkasan),
    setelah blok "Metode Pembayaran":

    @include('orders._tracking_resi', ['order' => $order])
--}}

@php
    use App\Services\ShippingCalculatorService;
    $shippingCalc  = app(ShippingCalculatorService::class);
    $trackingUrl   = $order->tracking_url;
    $hasTracking   = $order->hasTrackingNumber();
    $courierDisplay = $order->courier_display;
@endphp

{{-- ── Informasi Pengiriman ── --}}
<div class="border-t border-stone-200 pt-3 sm:pt-4 mt-3 sm:mt-4">
    <h4 class="text-xs sm:text-sm font-bold text-stone-800 mb-2 sm:mb-3 flex items-center">
        <i class="fas fa-truck mr-2 text-amber-600"></i>
        Informasi Pengiriman
    </h4>

    <div class="bg-stone-50 rounded-lg sm:rounded-xl p-3 sm:p-4 space-y-2.5">

        {{-- Kurir --}}
        @if($order->courier_name)
        <div class="flex items-start justify-between gap-2">
            <span class="text-[10px] sm:text-xs text-stone-500 flex-shrink-0">Kurir</span>
            <span class="text-xs sm:text-sm font-semibold text-stone-800 text-right">
                {{ $order->courier_name }}
            </span>
        </div>
        @endif

        {{-- Estimasi --}}
        @if($order->estimated_days)
        <div class="flex items-start justify-between gap-2">
            <span class="text-[10px] sm:text-xs text-stone-500 flex-shrink-0">Estimasi</span>
            <span class="text-xs font-medium text-stone-700 text-right">
                <i class="fas fa-clock text-stone-400 mr-1" style="font-size:10px"></i>
                {{ $order->estimated_days }}
            </span>
        </div>
        @endif

        {{-- Ongkir --}}
        @if(isset($order->shipping_cost))
        <div class="flex items-start justify-between gap-2">
            <span class="text-[10px] sm:text-xs text-stone-500 flex-shrink-0">Ongkos kirim</span>
            @if((int)$order->shipping_cost === 0)
            <span class="inline-flex items-center px-2 py-0.5 bg-emerald-50 text-emerald-700 rounded-full text-[10px] sm:text-xs font-semibold border border-emerald-200">
                <i class="fas fa-check-circle mr-1"></i>GRATIS
            </span>
            @else
            <span class="text-xs font-semibold text-stone-800">
                Rp {{ number_format($order->shipping_cost, 0, ',', '.') }}
            </span>
            @endif
        </div>
        @endif

        {{-- Berat --}}
        @if($order->total_weight)
        <div class="flex items-start justify-between gap-2">
            <span class="text-[10px] sm:text-xs text-stone-500 flex-shrink-0">Berat</span>
            <span class="text-xs text-stone-600">
                {{ $order->total_weight >= 1000
                    ? round($order->total_weight / 1000, 2) . ' kg'
                    : $order->total_weight . ' gram' }}
            </span>
        </div>
        @endif

        {{-- Nomor Resi --}}
        <div class="pt-2 border-t border-stone-200">
            @if($hasTracking)
            <div class="flex items-center justify-between gap-2 mb-2">
                <span class="text-[10px] sm:text-xs text-stone-500 flex-shrink-0">No. Resi</span>
            </div>

            <div class="flex items-center gap-2 p-2.5 bg-white rounded-lg border border-stone-200 shadow-sm">
                <i class="fas fa-barcode text-stone-400 text-base flex-shrink-0"></i>
                <span class="font-mono text-sm sm:text-base font-bold text-stone-800 tracking-widest flex-1 select-all"
                      id="resi-display">{{ $order->tracking_number }}</span>
                <button
                    onclick="copyResi('{{ $order->tracking_number }}')"
                    class="flex-shrink-0 w-8 h-8 bg-amber-50 hover:bg-amber-100 rounded-lg flex items-center justify-center border border-amber-200 transition"
                    title="Salin nomor resi">
                    <i class="fas fa-copy text-amber-600 text-xs"></i>
                </button>
            </div>

            {{-- Tombol cek di website ekspedisi --}}
            @if($trackingUrl)
            <a href="{{ $trackingUrl }}" target="_blank" rel="noopener noreferrer"
               class="mt-2 w-full inline-flex items-center justify-center gap-2 px-3 py-2.5
                      bg-blue-50 hover:bg-blue-100 border border-blue-200 text-blue-700
                      text-xs font-semibold rounded-lg transition">
                <i class="fas fa-external-link-alt text-blue-500" style="font-size:11px"></i>
                Cek di Website {{ $courierDisplay }}
            </a>
            @endif

            <p class="text-[10px] text-stone-400 mt-2 text-center">
                <i class="fas fa-info-circle mr-1"></i>
                Gunakan nomor resi di atas untuk melacak paket di website kurir
            </p>

            @else
            {{-- Resi belum ada --}}
            <div class="text-center py-3">
                @if(in_array($order->status, ['processing']))
                <div class="flex items-center gap-2 p-3 bg-amber-50 rounded-lg border border-amber-200">
                    <i class="fas fa-box text-amber-500 flex-shrink-0"></i>
                    <p class="text-xs text-amber-700">
                        Nomor resi akan tersedia setelah pesanan dikemas dan dikirim.
                    </p>
                </div>
                @elseif($order->isCancelled())
                <p class="text-xs text-stone-400">Pesanan dibatalkan — tidak ada resi.</p>
                @else
                <div class="flex items-center gap-2 p-3 bg-stone-50 rounded-lg border border-stone-200">
                    <i class="fas fa-clock text-stone-400 flex-shrink-0"></i>
                    <p class="text-xs text-stone-500">Nomor resi sedang diproses.</p>
                </div>
                @endif
            </div>
            @endif
        </div>
    </div>
</div>

{{-- ── Script: Salin resi ke clipboard ── --}}
@once
<script>
function copyResi(resi) {
    if (!resi) return;

    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(resi).then(() => showResiCopied(resi));
    } else {
        // Fallback untuk browser lama
        const el = document.createElement('textarea');
        el.value = resi;
        el.style.position = 'fixed';
        el.style.opacity  = '0';
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
        showResiCopied(resi);
    }
}

function showResiCopied(resi) {
    // Toast notifikasi
    const toast = document.createElement('div');
    toast.className = 'fixed bottom-6 left-1/2 -translate-x-1/2 z-[99999] px-4 py-2.5 bg-stone-800 text-white text-xs font-semibold rounded-xl shadow-xl flex items-center gap-2';
    toast.innerHTML = `<i class="fas fa-check-circle text-emerald-400"></i> Nomor resi <strong class="font-mono">${resi}</strong> disalin!`;
    document.body.appendChild(toast);
    setTimeout(() => {
        toast.style.transition = 'opacity .3s';
        toast.style.opacity    = '0';
        setTimeout(() => toast.remove(), 300);
    }, 2500);
}
</script>
@endonce
