@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)
                        {{-- Skip field galeri/gallery, email, dan template_id --}}
                        @if(!str_contains(strtolower($key), 'galeri') && 
                            !str_contains(strtolower($key), 'gallery') && 
                            $key !== 'email' && 
                            $key !== 'template_id')
                            <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 (dinamis untuk semua field galeri) -->
        @foreach($pelanggan->details as $detail)
            @foreach($detail->detail_form as $key => $value)
                {{-- Cek apakah field mengandung kata 'galeri' atau 'gallery' dan berupa array --}}
                @if((str_contains(strtolower($key), 'galeri') || str_contains(strtolower($key), 'gallery')) && is_array($value) && !empty($value))
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold mb-4">{{ ucfirst(str_replace('_', ' ', $key)) }}</h3>
                        <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
                            @foreach($value as $foto)
                                <div class="relative group">
                                    <img src="{{ asset('storage/' . $foto) }}" 
                                         alt="Foto {{ $key }}" 
                                         class="w-full h-24 object-cover rounded border hover:opacity-75 transition-opacity cursor-pointer"
                                         onclick="openModal('{{ asset('storage/' . $foto) }}')">
                                    
                                    {{-- Overlay untuk zoom icon --}}
                                    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-200 rounded flex items-center justify-center">
                                        <svg class="w-6 h-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
                                        </svg>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            @endforeach
        @endforeach

        <!-- Modal untuk memperbesar gambar -->
        <div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 hidden z-50 flex items-center justify-center" onclick="closeModal()">
            <div class="max-w-4xl max-h-full p-4">
                <img id="modalImage" src="" alt="Full Size" class="max-w-full max-h-full object-contain rounded">
                <button onclick="closeModal()" class="absolute top-4 right-4 text-white text-2xl hover:text-gray-300">×</button>
            </div>
        </div>

        <!-- 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>

<script>
function openModal(imageSrc) {
    document.getElementById('modalImage').src = imageSrc;
    document.getElementById('imageModal').classList.remove('hidden');
}

function closeModal() {
    document.getElementById('imageModal').classList.add('hidden');
}

// Close modal with ESC key
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeModal();
    }
});
</script>
@endsection