@extends('layouts.app')

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

@section('content')
<div class="w-full bg-gray-100 p-8">
    <div class="bg-white rounded-lg shadow p-8 max-w-5xl mx-auto">

        <!-- Tema Undangan -->
        <h3 class="text-lg font-semibold mb-4">Tema Undangan</h3>
        <div class="grid grid-cols-2 gap-6 mb-8">
            <div>
                <label class="text-gray-600 text-sm">Nama Template</label>
                <div class="border rounded px-3 py-2 min-h-[45px] flex items-center">
                    {{ $pelanggan->nama_template }}
                </div>
            </div>
            <div>
                <label class="text-gray-600 text-sm">Kategori</label>
                <div class="border rounded px-3 py-2 min-h-[45px] flex items-center">
                    {{ $pelanggan->kategori }}
                </div>
            </div>
            <div>
                <label class="text-gray-600 text-sm">Price</label>
                <div class="border rounded px-3 py-2 min-h-[45px] flex items-center">
                    Rp {{ number_format($pelanggan->harga, 0, ',', '.') }}
                </div>
            </div>
            <div>
                <label class="text-gray-600 text-sm">Tanggal Pemesanan</label>
                <div class="border rounded px-3 py-2 min-h-[45px] flex items-center">
                    {{ $pelanggan->created_at->translatedFormat('d F Y') }}
                </div>
            </div>
        </div>

        <!-- Pemesan Undangan -->
        <h3 class="text-lg font-semibold mb-4">Pemesan Undangan</h3>
        <div class="grid grid-cols-2 gap-6 mb-8">
            <div>
                <label class="text-gray-600 text-sm">Nama</label>
                <div class="border rounded px-3 py-2 min-h-[45px] flex items-center">
                    {{ $pelanggan->nama_pemesan }}
                </div>
            </div>
            <div>
                <label class="text-gray-600 text-sm">No. WhatsApp</label>
                <div class="border rounded px-3 py-2 min-h-[45px] flex items-center">
                    {{ $pelanggan->no_tlpn }}
                </div>
            </div>
            <div class="col-span-2">
                <label class="text-gray-600 text-sm">Email</label>
                <div class="border rounded px-3 py-2 min-h-[45px] flex items-center">
                    {{ $pelanggan->email }}
                </div>
            </div>
        </div>

        <!-- Detail Form (dinamis dari JSON) -->
        @if($pelanggan->details && count($pelanggan->details) > 0)
            <h3 class="text-lg font-semibold mb-4">Detail Undangan</h3>
            <div class="grid grid-cols-2 gap-6 mb-8">
                @foreach($pelanggan->details as $detail)
                    @foreach($detail->detail_form as $key => $value)
                     @if($key !== 'galeri')
                        <div>
                            <label class="text-gray-600 text-sm">{{ ucfirst(str_replace('_',' ',$key)) }}</label>
                            <div class="border rounded px-3 py-2 min-h-[45px] flex items-center">

                        @if(is_array($value))
                            {{ implode(', ', $value) }}
                        @else
                            {{ $value }}
                        @endif

                            </div>

                        </div>
                        @endif
                    @endforeach
                @endforeach
            </div>
        @endif

        <!-- Galeri -->
        @foreach($pelanggan->details as $detail)

    @if(isset($detail->detail_form['galeri']) && !empty($detail->detail_form['galeri']))

        <h3 class="text-lg font-semibold mb-4">Galeri</h3>
        <div class="grid grid-cols-5 gap-3">

            {{-- Loop data galeri dari dalam JSON --}}
            @foreach($detail->detail_form['galeri'] as $foto)
                <img src="{{ asset('storage/' . $foto) }}" alt="Foto Galeri" class="w-full h-24 object-cover rounded border">
            @endforeach

        </div>

    @endif
@endforeach

        <!-- Tombol Kembali -->
        <div class="mt-8 text-right">
            <a href="{{ route('admin.pelanggan.index') }}"
               class="bg-gray-500 hover:bg-gray-600 text-white px-5 py-2 rounded">
               Kembali
            </a>
        </div>
    </div>
</div>
@endsection