@extends('layouts.app')

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

@section('content')
<div class="container mx-auto py-10 px-4">
    <!-- Header -->
    <div class="flex justify-between items-center mb-8">
        <h2 class="text-3xl font-extrabold text-gray-800 tracking-tight">
            🧾 Detail Pesanan
        </h2>
        <a href="{{ route('admin.pelanggan.index') }}"
           class="px-5 py-2 rounded-lg bg-gray-700 text-white text-sm font-medium shadow hover:bg-gray-800 transition">
           ← Kembali
        </a>
    </div>

    <!-- Card Detail -->
    <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 mb-8 hover:shadow-xl transition">
        <h3 class="text-2xl font-semibold mb-6 text-gray-900 border-b pb-3">
            👤 Informasi Pemesan
        </h3>

        <div class="overflow-hidden rounded-lg border border-gray-200">
            <table class="min-w-full text-sm text-gray-700">
                <tbody class="divide-y divide-gray-200">
                    <tr class="hover:bg-gray-50">
                        <th class="px-4 py-3 font-semibold bg-gray-50 w-1/4">Nama Pemesan</th>
                        <td class="px-4 py-3">{{ $pelanggan->nama_pemesan }}</td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                        <th class="px-4 py-3 font-semibold bg-gray-50">Email</th>
                        <td class="px-4 py-3">{{ $pelanggan->email }}</td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                        <th class="px-4 py-3 font-semibold bg-gray-50">No Telepon</th>
                        <td class="px-4 py-3">{{ $pelanggan->no_tlpn }}</td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                        <th class="px-4 py-3 font-semibold bg-gray-50">Template</th>
                        <td class="px-4 py-3">{{ $pelanggan->template->nama_template ?? '-' }}</td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                        <th class="px-4 py-3 font-semibold bg-gray-50">Harga</th>
                        <td class="px-4 py-3 text-gray-900 font-medium">
                            Rp {{ number_format($pelanggan->harga, 0, ',', '.') }}
                        </td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                        <th class="px-4 py-3 font-semibold bg-gray-50">Status</th>
                        <td class="px-4 py-3">
                            <span class="px-3 py-1.5 rounded-full text-xs font-semibold
                                {{ $pelanggan->status == 'diterima' ? 'bg-green-100 text-green-700 border border-green-300' :
                                   ($pelanggan->status == 'ditolak' ? 'bg-red-100 text-red-700 border border-red-300' :
                                   'bg-yellow-100 text-yellow-700 border border-yellow-300') }}">
                                {{ ucfirst($pelanggan->status) }}
                            </span>
                        </td>
                    </tr>
                    <tr class="hover:bg-gray-50">
                        <th class="px-4 py-3 font-semibold bg-gray-50">Kode Undangan</th>
                        <td class="px-4 py-3 font-mono text-indigo-600 font-semibold">
                            {{ $pelanggan->invitation_code }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Detail Form dari JSON -->
<div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition">
    <h3 class="text-2xl font-semibold mb-6 text-gray-900 border-b pb-3">
        📋 Detail Form Pemesanan
    </h3>

    @if($pelanggan->form && count($pelanggan->form) > 0)
        <div class="overflow-hidden rounded-lg border border-gray-200">
            <table class="min-w-full text-sm text-gray-700">
                <tbody class="divide-y divide-gray-200">
                    @foreach($pelanggan->form as $field => $value)
                        <tr class="hover:bg-gray-50 align-top">
                            <th class="px-4 py-3 font-semibold bg-gray-50 w-1/4">
                                {{ ucwords(str_replace('_', ' ', $field)) }}
                            </th>
                            <td class="px-4 py-3">
                                @if(is_array($value))
                                    {{ implode(', ', $value) }}

                                {{-- ✅ Jika value adalah path atau URL gambar --}}
                                @elseif(
                                    is_string($value) &&
                                    (preg_match('/\.(jpg|jpeg|png|gif|webp)$/i', $value)
                                    || Str::startsWith($value, ['storage/', 'uploads/', 'images/']))
                                )
                                    @php
                                        // Cek apakah gambar disimpan di storage Laravel
                                        $imageUrl = Str::startsWith($value, ['http://', 'https://'])
                                            ? $value
                                            : asset($value);
                                    @endphp

                                    <a href="{{ $imageUrl }}" target="_blank" class="block mt-2">
                                        <img src="{{ $imageUrl }}"
                                             alt="{{ $field }}"
                                             class="w-40 h-40 object-cover rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition">
                                    </a>

                                {{-- ✅ Jika value adalah URL biasa --}}
                                @elseif(is_string($value) && filter_var($value, FILTER_VALIDATE_URL))
                                    <a href="{{ $value }}" target="_blank"
                                       class="text-blue-600 hover:text-blue-800 underline break-words">
                                       {{ $value }}
                                    </a>

                                {{-- ✅ Jika teks biasa --}}
                                @else
                                    {{ $value ?: '-' }}
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <p class="text-gray-500 italic mt-4">Tidak ada data form tambahan.</p>
    @endif
</div>

</div>
@endsection