@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-10">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">

        {{-- Header --}}
        <div class="flex justify-between items-center mb-8">
            <h1 class="text-2xl font-bold text-gray-800 dark:text-white">🧾 Detail Transaksi</h1>
            <a href="{{ route('dashboard.transactions') }}" class="inline-flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400 hover:underline">
                ← Kembali ke Riwayat Transaksi
            </a>
        </div>

        {{-- Informasi Transaksi --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div class="space-y-3 text-sm text-gray-600 dark:text-gray-300">
                <p><strong>ID:</strong> {{ $transaction->id }}</p>
                <p><strong>Status:</strong>
                    @php
                        $statusClass = match($transaction->status) {
                            'approved' => 'text-green-500',
                            'payment_verification' => 'text-yellow-500',
                            'pending' => 'text-blue-500',
                            'cancelled' => 'text-red-500',
                            default => 'text-gray-500',
                        };
                    @endphp
                    <span class="font-semibold {{ $statusClass }}">
                        {{ ucfirst(str_replace('_', ' ', $transaction->status)) }}
                    </span>
                </p>
                <p><strong>Total:</strong> Rp {{ number_format($transaction->total, 0, ',', '.') }}</p>
                <p><strong>Tanggal:</strong> {{ $transaction->created_at->translatedFormat('d F Y H:i') }}</p>

                @if (!empty($transaction->notes))
                    <div class="mt-4 p-4 bg-gray-100 dark:bg-gray-700 rounded-lg text-gray-700 dark:text-gray-300 text-sm">
                        <h4 class="font-semibold mb-2 text-gray-800 dark:text-white">📝 Catatan Pesanan:</h4>
                        <p>{{ $transaction->notes }}</p>
                    </div>
                @endif

                @if (!empty($transaction->admin_note) || !empty($transaction->admin_rationale))
                <div class="mt-6 p-4 bg-gray-100 dark:bg-gray-700 rounded-lg text-gray-700 dark:text-gray-300 text-sm">
                    <h4 class="font-semibold mb-2 text-gray-800 dark:text-white">📋 Catatan Admin:</h4>
                    @if ($transaction->admin_rationale)
                        <p><strong>Rasionalisasi:</strong> {{ $transaction->admin_rationale }}</p>
                    @endif
                    @if ($transaction->admin_note)
                        <p class="mt-2">{{ $transaction->admin_note }}</p>
                    @endif
                </div>
            @endif

            </div>

            {{-- Preview Bukti Pembayaran --}}
<div x-data="{ showPreview: false, previewSrc: '' }" class="flex flex-col items-center justify-center">
    <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-3">📷 Bukti Pembayaran</h2>

    @if($transaction->payment_proof)
        @php
            $imagePath = asset('storage/' . $transaction->payment_proof);
        @endphp
        <img src="{{ $imagePath }}"
             alt="Bukti Transfer"
             onerror="this.onerror=null;this.src='{{ asset('images/default-payment.png') }}';"
             @click="showPreview = true; previewSrc = '{{ $imagePath }}'"
             class="cursor-zoom-in rounded-lg border dark:border-gray-700 object-cover w-64 h-64 shadow-md hover:scale-105 transition duration-300 ease-in-out">
        <p class="text-xs text-gray-500 mt-2">Klik untuk memperbesar</p>
    @else
        <p class="text-sm text-red-500 text-center">Belum ada bukti pembayaran diupload.</p>
    @endif

    {{-- Modal Preview --}}
    <div x-show="showPreview"
         x-transition
         class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50"
         style="display: none;">
        <div @click.away="showPreview = false" class="max-w-3xl w-full p-4">
            <img :src="previewSrc"
                 alt="Preview Bukti"
                 class="w-full max-h-[80vh] object-contain rounded-xl shadow-2xl border-4 border-white dark:border-gray-800">
            <div class="text-center mt-4">
                <button @click="showPreview = false"
                        class="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg shadow">
                    ✖️ Tutup
                </button>
            </div>
        </div>
    </div>
</div>

        </div>
{{-- Form Upload Bukti Pembayaran --}}
<div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-8">
    <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-4">📤 Upload / Perbarui Bukti Pembayaran</h3>

    @if(session('success'))
        <div class="bg-green-100 text-green-800 px-4 py-2 rounded mb-4">
            ✅ {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="bg-red-100 text-red-800 px-4 py-2 rounded mb-4">
            ❌ <strong>Error:</strong>
            <ul class="mt-1 list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('transaction.upload', $transaction->id) }}" method="POST" enctype="multipart/form-data" class="space-y-4" id="uploadForm">
        @csrf
        <input type="file" name="payment_proof" id="payment_proof"
               accept=".jpg,.jpeg,.png,.pdf"
               class="block w-full text-sm text-gray-700 dark:text-gray-300 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:bg-[color:var(--primary-color)] file:text-white hover:file:brightness-110 dark:file:bg-gray-700"
               required>

        <p class="text-sm text-gray-500 dark:text-gray-300">
            Hanya file dengan format <strong>.jpg, .jpeg, .png</strong>. Maksimum ukuran 2MB.
        </p>

        <button type="submit"
                class="w-full md:w-auto px-6 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg shadow-md transition">
            🔄 Upload Bukti Baru
        </button>
    </form>
</div>

        {{-- Daftar Produk --}}
        <div class="mb-8">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">🛒 Produk dalam Pesanan</h2>

           <div class="space-y-4">
    @foreach($transaction->items as $item)
        @php
            $imgPath = $item->catalog->image_path ?? null;
            $img = catalogImage($imgPath); // Helper aman
        @endphp
        <div class="flex items-center gap-4 bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
            <img src="{{ $img }}" alt="Gambar Produk"
                 class="w-16 h-16 object-cover rounded border dark:border-gray-600">

            <div class="flex-1">
                <p class="font-semibold text-gray-800 dark:text-white truncate">
                    {{ $item->catalog->name }}
                </p>
                <p class="text-sm text-gray-600 dark:text-gray-300">
                    Harga: Rp {{ number_format($item->price, 0, ',', '.') }} × {{ $item->quantity }}
                </p>
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    Subtotal: Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                </p>
            </div>
        </div>
    @endforeach
</div>

        </div>

        {{-- Tombol Download PDF --}}
        <div class="text-center mt-6">
            <a href="{{ route('transaction.exportInvoice', $transaction->id) }}"
               target="_blank"
               class="inline-flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold text-xs rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
                🧾 Download Invoice
            </a>
        </div>

    </div>
</div>
<script>
    // Validasi ukuran dan ekstensi file
    document.getElementById('uploadForm').addEventListener('submit', function (e) {
        const fileInput = document.getElementById('payment_proof');
        const file = fileInput.files[0];
        const maxSize = 2 * 1024 * 1024; // 2MB
        const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];

        if (!file) {
            alert("❗ Harap pilih file terlebih dahulu.");
            e.preventDefault();
            return;
        }

        if (!allowedTypes.includes(file.type)) {
            alert("❗ Format file tidak didukung. Gunakan JPG atau PNG.");
            e.preventDefault();
            return;
        }

        if (file.size > maxSize) {
            alert("❗ Ukuran file terlalu besar. Maksimum 2MB.");
            e.preventDefault();
            return;
        }
    });
</script>
@endsection