@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->kode_pelanggan }}
                        </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)
            @php
                $fotoFields = [];
                $textFields = [];

                foreach ($pelanggan->form as $field => $value) {
                    $isFoto = false;

                    if (is_array($value)) {
                        // jika array berisi gambar
                        $isFoto = collect($value)->contains(function ($v) {
                            return preg_match('/\.(jpg|jpeg|png|gif|webp)$/i', $v)
                                || Str::startsWith($v, ['storage/', 'photos/', 'uploads/', 'images/']);
                        });
                    } elseif (is_string($value)) {
                        // jika satu gambar
                        $isFoto = preg_match('/\.(jpg|jpeg|png|gif|webp)$/i', $value)
                            || Str::startsWith($value, ['storage/', 'photos/', 'uploads/', 'images/']);
                    }

                    if ($isFoto) {
                        $fotoFields[$field] = $value;
                    } else {
                        $textFields[$field] = $value;
                    }
                }
                $orderedFields = array_merge($textFields, $fotoFields);
            @endphp

            <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($orderedFields 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">
                                    {{-- ✅ Jika value adalah array (banyak foto) --}}
                                    @if(is_array($value))
                                        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
                                            @foreach($value as $img)
                                                @php
                                                    if (Str::startsWith($img, ['http://', 'https://'])) {
                                                        $imageUrl = $img;
                                                    } elseif (Str::startsWith($img, ['storage/', 'public/'])) {
                                                        $imageUrl = asset($img);
                                                    } elseif (Str::startsWith($img, 'photos/')) {
                                                        $imageUrl = asset('storage/' . $img);
                                                    } else {
                                                        $imageUrl = asset('storage/' . $img);
                                                    }
                                                @endphp
                                                <a href="{{ $imageUrl }}" target="_blank">
                                                    <img src="{{ $imageUrl }}"
                                                         alt="{{ $field }}"
                                                         class="w-32 h-32 object-cover rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition">
                                                </a>
                                            @endforeach
                                        </div>

                                    {{-- ✅ Jika gambar tunggal --}}
                                    @elseif(
                                        is_string($value) &&
                                        (preg_match('/\.(jpg|jpeg|png|gif|webp)$/i', $value)
                                        || Str::startsWith($value, ['storage/', 'uploads/', 'images/', 'photos/']))
                                    )
                                        @php
                                            if (Str::startsWith($value, ['http://', 'https://'])) {
                                                $imageUrl = $value;
                                            } elseif (Str::startsWith($value, ['storage/', 'public/'])) {
                                                $imageUrl = asset($value);
                                            } elseif (Str::startsWith($value, 'photos/')) {
                                                $imageUrl = asset('storage/' . $value);
                                            } else {
                                                $imageUrl = asset('storage/' . $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 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