@extends('layouts.dashboard')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl 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

        @if(session('error'))
        <div class="relative px-4 py-3 mb-4 text-red-700 bg-red-100 border border-red-400 rounded" id="error-alert">
            <span class="block sm:inline">{{ session('error') }}</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">
                <div class="flex justify-between items-center mb-6">
                    <h1 class="text-2xl font-bold text-gray-800">Detail Pesanan</h1>
                    <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>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Informasi Pesanan -->
                    <div>
                        <h2 class="text-lg font-semibold mb-4">Informasi Pesanan</h2>
                        <div class="space-y-3">
                            <div>
                                <p class="text-sm text-gray-600">ID Pesanan</p>
                                <p class="font-medium">{{ $pesanan->id }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Tanggal Pesanan</p>
                                <p class="font-medium">{{ $pesanan->created_at->format('d M Y H:i') }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Total Harga</p>
                                <p class="font-medium text-[#2C7A7B]">Rp {{ number_format($pesanan->total_harga, 0, ',', '.') }}</p>
                            </div>
                            @if($pesanan->catatan)
                            <div>
                                <p class="text-sm text-gray-600">Catatan</p>
                                <p class="font-medium">{{ $pesanan->catatan }}</p>
                            </div>
                            @endif
                        </div>
                    </div>

                    <!-- Informasi Barang -->
                    <div>
                        <h2 class="text-lg font-semibold mb-4">Informasi Barang</h2>
                        @if($pesanan->items->count() > 0)
                            @foreach($pesanan->items as $item)
                            <div class="flex items-start space-x-4 mb-4">
                                <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>
                                    <h3 class="font-medium text-gray-900">{{ $item->barang->nama_barang }}</h3>
                                    <p class="text-sm text-gray-500">Jumlah: {{ $item->jumlah }}</p>
                                    <p class="text-sm text-gray-500">Harga: Rp {{ number_format($item->harga, 0, ',', '.') }}</p>
                                    <p class="text-sm text-gray-500">Subtotal: Rp {{ number_format($item->total_harga, 0, ',', '.') }}</p>
                                </div>
                            </div>
                            @endforeach
                        @else
                            <div class="flex items-start space-x-4">
                                <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>
                                    <h3 class="font-medium text-gray-900">{{ $pesanan->barang->nama_barang }}</h3>
                                    <p class="text-sm text-gray-500">Jumlah: {{ $pesanan->jumlah }}</p>
                                    <p class="text-sm text-gray-500">Harga: Rp {{ number_format($pesanan->barang->harga, 0, ',', '.') }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Informasi Pengiriman -->
                <div class="mt-6">
                    <h2 class="text-lg font-semibold mb-4">Informasi Pengiriman</h2>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="space-y-3">
                            <div>
                                <p class="text-sm text-gray-600">Alamat</p>
                                <p class="font-medium">{{ $pesanan->user->alamat }}</p>
                            </div>
                            <div>
                            <div>
                                <p class="text-sm text-gray-600">Kurir</p>
                                <p class="font-medium">{{ strtoupper($pesanan->courier) }} {{ $pesanan->shipping_service }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Ongkos Kirim</p>
                                <p class="font-medium text-[#2C7A7B]">Rp {{ number_format($pesanan->shipping_cost, 0, ',', '.') }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Estimasi Pengiriman</p>
                                <p class="font-medium">{{ $pesanan->shipping_etd }} hari</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Informasi Transaksi -->
                @if($pesanan->transaksi)
                <div class="mt-6">
                    <h2 class="text-lg font-semibold mb-4">Informasi Pembayaran</h2>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <p class="text-sm text-gray-600">Status Pembayaran</p>
                                <p class="font-medium">{{ ucfirst(str_replace('_', ' ', $pesanan->transaksi->status)) }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-600">Total Pembayaran</p>
                                <p class="font-medium">Rp {{ number_format($pesanan->transaksi->total_pembayaran, 0, ',', '.') }}</p>
                            </div>
                            @if($pesanan->transaksi->bukti_pembayaran)
                            <div class="md:col-span-2">
                                <p class="text-sm text-gray-600 mb-2">Bukti Pembayaran</p>
                                <img src="{{ Storage::url($pesanan->transaksi->bukti_pembayaran) }}" alt="Bukti Pembayaran" class="max-w-xs rounded-lg">
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                @endif

                <!-- Tombol Aksi -->
                <div class="mt-6 flex flex-wrap gap-4">
                    @if($pesanan->status === 'pending')
                        @if($pesanan->transaksi && $pesanan->transaksi->status === 'menunggu_pembayaran')
                            <button onclick="payWithSnap({{ $pesanan->id }})" class="inline-flex items-center px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors">
                                <i class="fas fa-money-bill-wave mr-2"></i>
                                Lanjutkan Pembayaran
                            </button>
                        @elseif(!$pesanan->transaksi)
                            <button onclick="payWithSnap({{ $pesanan->id }})" class="inline-flex items-center px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
                                <i class="fas fa-money-bill-wave mr-2"></i>
                                Bayar
                            </button>
                        @endif
                        
                        <form action="{{ route('pesanan.destroy', $pesanan) }}" method="POST" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="button" onclick="confirmDelete({{ $pesanan->id }})" class="inline-flex items-center px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors">
                                <i class="fas fa-trash-alt mr-2"></i>
                                Batalkan Pesanan
                            </button>
                        </form>
                    @endif

                    <a href="{{ route('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>

@push('scripts')
<script type="text/javascript" src="https://app.midtrans.com/snap/snap.js" data-client-key="{{ config('midtrans.client_key') }}"></script>
<script>
function confirmDelete(id) {
    if (confirm('Apakah Anda yakin ingin membatalkan pesanan ini?')) {
        const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        fetch(`/pesanan/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': token,
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = '{{ route("pesanan.index") }}';
            } else {
                alert(data.message || 'Terjadi kesalahan saat membatalkan pesanan');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat membatalkan pesanan');
        });
    }
}

function payWithSnap(pesananId) {
    // Tampilkan loading state
    const button = event.target;
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Memproses...';
    button.disabled = true;

    // Tentukan endpoint berdasarkan teks tombol
    const isContinuePayment = button.textContent.trim() === 'Lanjutkan Pembayaran';
    const endpoint = isContinuePayment 
        ? `/transaksi/get-snap-token/${pesananId}`
        : `/transaksi/create/${pesananId}`;

    // Panggil endpoint untuk mendapatkan snap token
    fetch(endpoint, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(err => {
                throw new Error(err.error || 'Terjadi kesalahan saat memproses pembayaran');
            });
        }
        return response.json();
    })
    .then(data => {
        console.log('Snap Token Response:', data); // Debug log
        if (data.snap_token) {
            window.snap.pay(data.snap_token, {
                onSuccess: function(result) {
                    // Update status transaksi
                    fetch('/transaksi/update-status', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                        },
                        body: JSON.stringify({
                            order_id: result.order_id,
                            payment_type: result.payment_type,
                            transaction_status: result.transaction_status
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        // Tampilkan pesan sukses
                        alert('Pembayaran berhasil! Pesanan Anda akan segera diproses.');
                        window.location.href = '{{ route("pesanan.index") }}';
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Terjadi kesalahan saat mengupdate status transaksi');
                        window.location.href = '{{ route("pesanan.index") }}';
                    });
                },
                onPending: function(result) {
                    // Tampilkan pesan pending
                    alert('Pembayaran Anda sedang diproses. Silakan selesaikan pembayaran Anda.');
                    window.location.href = '{{ route("pesanan.index") }}';
                },
                onError: function(result) {
                    // Tampilkan pesan error
                    alert('Terjadi kesalahan saat memproses pembayaran. Silakan coba lagi.');
                    window.location.href = '{{ route("pesanan.index") }}';
                },
                onClose: function() {
                    // Reset button state dan tampilkan pesan
                    button.innerHTML = originalText;
                    button.disabled = false;
                    alert('Anda menutup halaman pembayaran. Anda dapat melanjutkan pembayaran nanti dengan mengklik tombol "Lanjutkan Pembayaran".');
                    window.location.href = '{{ route("pesanan.index") }}';
                }
            });
        } else {
            console.error('No snap token in response:', data); // Debug log
            alert('Terjadi kesalahan saat memproses pembayaran');
            button.innerHTML = originalText;
            button.disabled = false;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert(error.message || 'Terjadi kesalahan saat memproses pembayaran');
        button.innerHTML = originalText;
        button.disabled = false;
    });
}

// Auto-hide alerts after 3 seconds
document.addEventListener('DOMContentLoaded', function() {
    const alerts = document.querySelectorAll('#success-alert, #error-alert');
    alerts.forEach(alert => {
        setTimeout(() => {
            alert.remove();
        }, 3000);
    });
});
</script>
@endpush
@endsection