@extends('layouts.apoteker')

@section('title', 'Detail Transaksi')

@section('content')
<div class="max-w-4xl mx-auto 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-6">
            <h1 class="text-2xl font-bold text-gray-800 dark:text-white">🧾 Detail Transaksi</h1>
            <a href="{{ route('apoteker.transactions.index') }}"
               class="text-sm text-blue-600 dark:text-blue-400 hover:underline">
                ← Kembali ke Daftar Transaksi
            </a>
        </div>

        {{-- Info Transaksi --}}
        <div class="grid md:grid-cols-2 gap-6">
            <div class="text-sm space-y-3 text-gray-600 dark:text-gray-300">
                <p><strong>ID:</strong> {{ $transaction->id }}</p>
                <p><strong>Status:</strong>
                    <span class="font-semibold capitalize text-blue-600">{{ $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 ($transaction->notes)
                    <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded">
                        <h4 class="font-semibold mb-1 text-gray-800 dark:text-white">📝 Catatan Pembeli:</h4>
                        <p>{{ $transaction->notes }}</p>
                    </div>
                @endif

                @if ($transaction->admin_note || $transaction->admin_rationale)
                    <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded">
                        <h4 class="font-semibold mb-1 text-gray-800 dark:text-white">📋 Catatan Apoteker:</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>

            {{-- Bukti Pembayaran --}}
            <div x-data="{ showPreview: false, previewSrc: '' }" class="text-center">
                <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-2">📷 Bukti Pembayaran</h3>
                @if($transaction->payment_proof)
                    @php $img = asset('storage/' . $transaction->payment_proof); @endphp
                    <img src="{{ $img }}"
                         @click="showPreview = true; previewSrc = '{{ $img }}'"
                         class="w-52 h-52 object-cover border rounded-lg shadow cursor-pointer hover:scale-105 transition"
                         alt="Bukti Pembayaran">
                    <p class="text-xs mt-1 text-gray-500">Klik gambar untuk preview</p>
                @else
                    <p class="text-red-500 text-sm">Belum ada bukti pembayaran</p>
                @endif

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

        {{-- Validasi Error --}}
        @if ($errors->any())
            <div class="mt-6 p-4 bg-red-100 text-red-700 rounded">
                <ul class="list-disc list-inside text-sm">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Form Update Status --}}
        <form action="{{ route('apoteker.transactions.update', $transaction) }}" method="POST"
              class="mt-10 space-y-6">
            @csrf
            @method('PUT')

            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-white mb-1">Status</label>
                    <select name="status"
                            class="w-full border px-4 py-2 rounded dark:bg-gray-700 dark:text-white">
                        <option value="pending" @selected($transaction->status == 'pending')>Pending</option>
                        <option value="proses" @selected($transaction->status == 'proses')>Proses</option>
                        <option value="approved" @selected($transaction->status == 'approved')>Disetujui</option>
                        <option value="cancelled" @selected($transaction->status == 'cancelled')>Dibatalkan</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-white mb-1">Rasionalisasi</label>
                    <input type="text" name="admin_rationale"
                           value="{{ old('admin_rationale', $transaction->admin_rationale) }}"
                           class="w-full border px-4 py-2 rounded dark:bg-gray-700 dark:text-white">
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-white mb-1">Catatan</label>
                <textarea name="admin_note" rows="4"
                          class="w-full border px-4 py-2 rounded dark:bg-gray-700 dark:text-white">{{ old('admin_note', $transaction->admin_note) }}</textarea>
            </div>

            <div class="text-right">
                <button type="submit"
                        class="px-6 py-2 bg-[color:var(--primary-color)] text-white rounded hover:brightness-110 shadow">
                    💾 Simpan Perubahan
                </button>
            </div>
        </form>

        {{-- Daftar Produk --}}
        <div class="mt-10">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white mb-4">🛒 Produk Pesanan</h2>
            <div class="divide-y divide-gray-200 dark:divide-gray-700">
                @foreach($transaction->items as $item)
                    <div class="py-4 flex gap-4 items-center">
                        <img src="{{ catalogImage($item->catalog->image_path) }}"
                             class="w-16 h-16 object-cover rounded border" alt="">
                        <div>
                            <p class="font-semibold text-gray-800 dark:text-white">{{ $item->catalog->name }}</p>
                            <p class="text-sm text-gray-500">
                                Rp {{ number_format($item->price, 0, ',', '.') }} × {{ $item->quantity }}
                            </p>
                            <p class="text-sm text-gray-500">
                                Subtotal: Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                            </p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

    </div>
</div>
@endsection