@extends('layouts.admin')

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Fungsi untuk export PDF
    async function handleExportPDF() {
        try {
            // Ambil elemen template
            const element = document.getElementById('resi-template');
            if (!element) {
                console.error('Template resi tidak ditemukan');
                return;
            }

            // Tampilkan elemen dan tunggu sebentar agar render sempurna
            element.style.display = 'block';
            await new Promise(resolve => setTimeout(resolve, 100));

            // Konversi ke canvas
            const canvas = await html2canvas(element, {
                scale: 2,
                useCORS: true,
                logging: true
            });

            // Konversi ke PDF
            const { jsPDF } = window.jspdf;
            const pdf = new jsPDF('p', 'mm', 'a4');
            
            const imgWidth = 210; // A4 width in mm
            const imgHeight = (canvas.height * imgWidth) / canvas.width;
            
            const imgData = canvas.toDataURL('image/png');
            pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
            
            // Simpan PDF
            pdf.save('resi-{{ $pesanan->id }}.pdf');
            
            // Sembunyikan template
            element.style.display = 'none';
        } catch (error) {
            console.error('Error generating PDF:', error);
            alert('Terjadi kesalahan saat membuat PDF. Silakan coba lagi.');
        }
    }

    // Tambahkan event listener ke tombol
    const exportButton = document.querySelector('[data-export-pdf]');
    if (exportButton) {
        exportButton.addEventListener('click', handleExportPDF);
    }

    // Auto-hide alerts
    const alerts = document.querySelectorAll('#success-alert');
    alerts.forEach(alert => {
        setTimeout(() => {
            alert.remove();
        }, 3000);
    });
});
</script>

<style>
#resi-template {
    background: white;
    padding: 20px;
    margin: 0;
    width: 210mm; /* A4 width */
    min-height: 297mm; /* A4 height */
    position: fixed;
    left: -9999px;
    top: 0;
}

@media print {
    #resi-template {
        position: static;
        left: auto;
        top: auto;
    }
}

#resi-template * {
    color: black !important;
}

#resi-template .border {
    border-color: #000 !important;
}

#resi-template .text-gray-600,
#resi-template .text-gray-500 {
    color: #666 !important;
}
</style>
@endpush

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-6xl mx-auto">
        <!-- @if(session('success'))
        <div class="relative px-4 py-3 mb-4 text-green-700 bg-green-100 border border-green-400 rounded" id="success-alert">
            <span class="block sm:inline">{{ session('success') }}</span>
            <button type="button" class="absolute top-0 right-0 px-4 py-3" onclick="this.parentElement.style.display='none'">
                <i class="fas fa-times"></i>
            </button>
        </div>
        @endif -->

        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-6">
                <!-- Header Section -->
                <div class="flex justify-between items-center mb-6 pb-4 border-b">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-800">Detail Pesanan #{{ $pesanan->id }}</h1>
                        <p class="text-sm text-gray-500 mt-1">Tanggal: {{ $pesanan->created_at->format('d M Y H:i') }}</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="px-4 py-2 rounded-full text-sm font-medium
                            @if($pesanan->status === 'pending') bg-yellow-100 text-yellow-800
                            @elseif($pesanan->status === 'diproses') bg-blue-100 text-blue-800
                            @elseif($pesanan->status === 'dikirim') bg-purple-100 text-purple-800
                            @elseif($pesanan->status === 'selesai') bg-green-100 text-green-800
                            @else bg-red-100 text-red-800
                            @endif">
                            {{ ucfirst($pesanan->status) }}
                        </span>
                        @if($pesanan->status === 'diproses' || $pesanan->status === 'dikirim')
                        <form action="{{ route('admin.pesanan.cetak-resi', $pesanan->id) }}" method="GET" target="_blank">
                            <button type="submit" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                                <i class="fas fa-file-pdf mr-2"></i>
                                Cetak Alamat
                            </button>
                        </form>
                        @endif
                    </div>
                </div>

                <!-- Main Content -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- Left Column -->
                    <div class="lg:col-span-2 space-y-6">
                        <!-- Informasi Barang -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h2 class="text-lg font-semibold mb-4 flex items-center">
                                <i class="fas fa-box mr-2 text-indigo-600"></i>
                                Informasi Barang
                            </h2>
                            @if($pesanan->items->count() > 0)
                                @foreach($pesanan->items as $item)
                                <div class="flex items-start space-x-4 mb-4 p-3 bg-white rounded-lg shadow-sm">
                                    <div class="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border border-gray-200">
                                        @if($item->barang->gambar)
                                        <img src="{{ Storage::url($item->barang->gambar) }}" alt="{{ $item->barang->nama_barang }}" class="w-full h-full object-cover">
                                        @else
                                        <div class="w-full h-full bg-gray-200 flex items-center justify-center">
                                            <span class="text-gray-400 text-sm">No Image</span>
                                        </div>
                                        @endif
                                    </div>
                                    <div class="flex-grow">
                                        <h3 class="font-medium text-gray-900">{{ $item->barang->nama_barang }}</h3>
                                        <div class="grid grid-cols-2 gap-2 mt-2 text-sm">
                                            <div>
                                                <p class="text-gray-500">Jumlah</p>
                                                <p class="font-medium">{{ $item->jumlah }}</p>
                                            </div>
                                            <div>
                                                <p class="text-gray-500">Harga</p>
                                                <p class="font-medium">Rp {{ number_format($item->harga, 0, ',', '.') }}</p>
                                            </div>
                                            <div class="col-span-2">
                                                <p class="text-gray-500">Subtotal</p>
                                                <p class="font-medium text-indigo-600">Rp {{ number_format($item->total_harga, 0, ',', '.') }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            @else
                                <div class="flex items-start space-x-4 p-3 bg-white rounded-lg shadow-sm">
                                    <div class="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden border border-gray-200">
                                        @if($pesanan->barang->gambar)
                                        <img src="{{ Storage::url($pesanan->barang->gambar) }}" alt="{{ $pesanan->barang->nama_barang }}" class="w-full h-full object-cover">
                                        @else
                                        <div class="w-full h-full bg-gray-200 flex items-center justify-center">
                                            <span class="text-gray-400 text-sm">No Image</span>
                                        </div>
                                        @endif
                                    </div>
                                    <div class="flex-grow">
                                        <h3 class="font-medium text-gray-900">{{ $pesanan->barang->nama_barang }}</h3>
                                        <div class="grid grid-cols-2 gap-2 mt-2 text-sm">
                                            <div>
                                                <p class="text-gray-500">Jumlah</p>
                                                <p class="font-medium">{{ $pesanan->jumlah }}</p>
                                            </div>
                                            <div>
                                                <p class="text-gray-500">Harga</p>
                                                <p class="font-medium">Rp {{ number_format($pesanan->barang->harga, 0, ',', '.') }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <!-- Informasi Pengiriman -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h2 class="text-lg font-semibold mb-4 flex items-center">
                                <i class="fas fa-truck mr-2 text-indigo-600"></i>
                                Informasi Pengiriman
                            </h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="bg-white p-3 rounded-lg shadow-sm">
                                    <p class="text-sm text-gray-500">Nama Penerima</p>
                                    <p class="font-medium">{{ $pesanan->user->nama }}</p>
                                </div>
                                <div class="bg-white p-3 rounded-lg shadow-sm">
                                    <p class="text-sm text-gray-500">Alamat</p>
                                    <p class="font-medium">{{ $pesanan->shipping_info ?? $pesanan->user->alamat }}</p>
                                </div>
                                <div class="bg-white p-3 rounded-lg shadow-sm">
                                    <p class="text-sm text-gray-500">Kurir</p>
                                    <p class="font-medium">{{ strtoupper($pesanan->shipping_courier) }} {{ $pesanan->shipping_service }}</p>
                                </div>
                                <div class="bg-white p-3 rounded-lg shadow-sm">
                                    <p class="text-sm text-gray-500">Ongkos Kirim</p>
                                    <p class="font-medium text-indigo-600">Rp {{ number_format($pesanan->shipping_cost, 0, ',', '.') }}</p>
                                </div>
                                <div class="bg-white p-3 rounded-lg shadow-sm">
                                    <p class="text-sm text-gray-500">Estimasi Pengiriman</p>
                                    <p class="font-medium">{{ $pesanan->shipping_etd }} hari</p>
                                </div>
                                @if($pesanan->catatan)
                                <div class="md:col-span-2 bg-white p-3 rounded-lg shadow-sm">
                                    <p class="text-sm text-gray-500">Catatan Pengiriman</p>
                                    <p class="font-medium">{{ $pesanan->catatan }}</p>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="space-y-6">
                        <!-- Informasi Pesanan -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h2 class="text-lg font-semibold mb-4 flex items-center">
                                <i class="fas fa-shopping-cart mr-2 text-indigo-600"></i>
                                Informasi Pesanan
                            </h2>
                            <div class="space-y-3">
                                <div class="bg-white p-3 rounded-lg shadow-sm">
                                    <p class="text-sm text-gray-500">Total Harga</p>
                                    <p class="font-medium text-indigo-600">Rp {{ number_format($pesanan->total_harga, 0, ',', '.') }}</p>
                                </div>
                                @if($pesanan->catatan)
                                <div class="bg-white p-3 rounded-lg shadow-sm">
                                    <p class="text-sm text-gray-500">Catatan</p>
                                    <p class="font-medium">{{ $pesanan->catatan }}</p>
                                </div>
                                @endif
                            </div>
                        </div>

                        <!-- Informasi Pelanggan -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h2 class="text-lg font-semibold mb-4 flex items-center">
                                <i class="fas fa-user mr-2 text-indigo-600"></i>
                                Informasi Pelanggan
                            </h2>
                            <div class="space-y-3">
                                <div class="bg-white p-3 rounded-lg shadow-sm">
                                    <p class="text-sm text-gray-500">Nama</p>
                                    <p class="font-medium">{{ $pesanan->user->nama ?? $pesanan->user->name }}</p>
                                </div>
                                <div class="bg-white p-3 rounded-lg shadow-sm">
                                    <p class="text-sm text-gray-500">Email</p>
                                    <p class="font-medium">{{ $pesanan->user->email }}</p>
                                </div>
                                <div class="bg-white p-3 rounded-lg shadow-sm">
                                    <p class="text-sm text-gray-500">No. Telepon</p>
                                    <p class="font-medium">{{ $pesanan->user->no_telp ?? '-' }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Informasi Pembayaran -->
                        @if($pesanan->transaksi)
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h2 class="text-lg font-semibold mb-4 flex items-center">
                                <i class="fas fa-money-bill-wave mr-2 text-indigo-600"></i>
                                Informasi Pembayaran
                            </h2>
                            <div class="space-y-3">
                                <div class="bg-white p-3 rounded-lg shadow-sm">
                                    <p class="text-sm text-gray-500">Status Pembayaran</p>
                                    <p class="font-medium">{{ ucfirst(str_replace('_', ' ', $pesanan->transaksi->status)) }}</p>
                                </div>
                                <div class="bg-white p-3 rounded-lg shadow-sm">
                                    <p class="text-sm text-gray-500">Total Pembayaran</p>
                                    <p class="font-medium text-indigo-600">Rp {{ number_format($pesanan->transaksi->total_pembayaran, 0, ',', '.') }}</p>
                                </div>
                                @if($pesanan->transaksi->bukti_pembayaran)
                                <div class="bg-white p-3 rounded-lg shadow-sm">
                                    <p class="text-sm text-gray-500 mb-2">Bukti Pembayaran</p>
                                    <img src="{{ Storage::url($pesanan->transaksi->bukti_pembayaran) }}" alt="Bukti Pembayaran" class="max-w-full rounded-lg">
                                </div>
                                @endif
                            </div>
                        </div>
                        @endif

                        <!-- Update Status -->
                        <div class="bg-gray-50 rounded-lg p-4">
                            <h2 class="text-lg font-semibold mb-4 flex items-center">
                                <i class="fas fa-cog mr-2 text-indigo-600"></i>
                                Update Status
                            </h2>
                            <form action="{{ route('admin.pesanan.status', $pesanan) }}" method="POST">
                                @csrf
                                <div class="mb-4">
                                    <select name="status" id="status" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                                        <option value="pending" {{ $pesanan->status == 'pending' ? 'selected' : '' }}>Menunggu</option>
                                        <option value="diproses" {{ $pesanan->status == 'diproses' ? 'selected' : '' }}>Dibayar</option>
                                        <option value="dikirim" {{ $pesanan->status == 'dikirim' ? 'selected' : '' }}>Dikirim</option>
                                        <option value="selesai" {{ $pesanan->status == 'selesai' ? 'selected' : '' }}>Selesai</option>
                                        <option value="dibatalkan" {{ $pesanan->status == 'dibatalkan' ? 'selected' : '' }}>Dibatalkan</option>
                                    </select>
                                </div>
                                <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg transition-colors">
                                    <i class="fas fa-save mr-2"></i>Update Status
                                </button>
                            </form>
                        </div>

                        <!-- Tombol Kembali -->
                        <div class="flex justify-center">
                            <a href="{{ route('admin.pesanan.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors">
                                <i class="fas fa-arrow-left mr-2"></i>
                                Kembali
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Template Resi (Hidden) -->
<div id="resi-template" class="hidden">
    <div class="p-8 max-w-2xl mx-auto bg-white">
        <div class="text-center mb-8">
            <h1 class="text-2xl font-bold">Resi Pengiriman</h1>
            <p class="text-gray-600">#{{ $pesanan->id }}</p>
            <p class="text-sm text-gray-500">Tanggal: {{ $pesanan->created_at->format('d M Y H:i') }}</p>
        </div>
        
        <div class="grid grid-cols-2 gap-8 mb-8">
            <div class="border p-4 rounded-lg">
                <h2 class="font-semibold mb-2 text-lg">Pengirim</h2>
                <p class="font-medium">DIJEEELEKTRONIK</p>
            </div>
            <div class="border p-4 rounded-lg">
                <h2 class="font-semibold mb-2 text-lg">Penerima</h2>
                <p class="font-medium">{{ $pesanan->user->nama }}</p>
            </div>
        </div>

        <div class="mb-8 border p-4 rounded-lg">
            <h2 class="font-semibold mb-4 text-lg">Detail Pengiriman</h2>
            <table class="w-full">
                <tr>
                    <td class="py-2 font-medium">Kurir</td>
                    <td class="py-2">: {{ strtoupper($pesanan->shipping_courier) }} {{ $pesanan->shipping_service }}</td>
                </tr>
                <tr>
                    <td class="py-2 font-medium">Estimasi</td>
                    <td class="py-2">: {{ $pesanan->shipping_etd }} hari</td>
                </tr>
                <tr>
                    <td class="py-2 font-medium">Ongkos Kirim</td>
                    <td class="py-2">: Rp {{ number_format($pesanan->shipping_cost, 0, ',', '.') }}</td>
                </tr>
            </table>
        </div>

        <div class="mb-8 border p-4 rounded-lg">
            <h2 class="font-semibold mb-4 text-lg">Detail Barang</h2>
            <table class="w-full border-collapse">
                <thead>
                    <tr class="border-b">
                        <th class="text-left py-2 font-medium">Barang</th>
                        <th class="text-center py-2 font-medium">Jumlah</th>
                    </tr>
                </thead>
                <tbody>
                    @if($pesanan->items->count() > 0)
                        @foreach($pesanan->items as $item)
                        <tr class="border-b">
                            <td class="py-2">{{ $item->barang->nama_barang }}</td>
                            <td class="text-center py-2">{{ $item->jumlah }}</td>
                        </tr>
                        @endforeach
                    @else
                        <tr class="border-b">
                            <td class="py-2">{{ $pesanan->barang->nama_barang }}</td>
                            <td class="text-center py-2">{{ $pesanan->jumlah }}</td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>

        <div class="text-center text-sm text-gray-600 border-t pt-4">
            <p>Dicetak pada: {{ now()->format('d M Y H:i') }}</p>
            <p class="mt-2">Terima kasih telah berbelanja di DIJEEELEKTRONIK</p>
        </div>
    </div>
</div>

<style>
#resi-template {
    background: white;
    padding: 20px;
    margin: 0;
    width: 210mm; /* A4 width */
    min-height: 297mm; /* A4 height */
    position: fixed;
    left: -9999px;
    top: 0;
}

@media print {
    #resi-template {
        position: static;
        left: auto;
        top: auto;
    }
}

#resi-template * {
    color: black !important;
}

#resi-template .border {
    border-color: #000 !important;
}

#resi-template .text-gray-600,
#resi-template .text-gray-500 {
    color: #666 !important;
}
</style>
@endsection